Ich habe eine allgemeine Frage zu jQuery.

Ich habe einige jQuery-Schaltflächen erstellt, aber das Problem, das ich habe, ist, wenn Sie die Hälfte der Seite nach unten scrollen und die Schaltfläche drücken, springt die Seite zurück nach oben, anstatt in der Mitte zu bleiben, in der sich die Schaltfläche befindet?

Wie können Sie dies verhindern, da es für den Benutzer frustrierend ist?

Gibt es einen bestimmten Grund, warum es passiert?

jsFiddle-Beispiel:

$(".comment-here").click(function() {
   $(".comment-form").slideToggle('slow');
});

$(".main-btn.orange").click(function(){
   $(".comment-form").slideUp('slow');
});
6
user2965875 27 Nov. 2013 im 20:22

5 Antworten

Beste Antwort

Sie verhindern das Standardereignis nicht. Da Sie auf ein Ankertag klicken, besteht das Standardereignis für # darin, einfach an den Anfang des Dokuments zu springen.

Um dies zu verhindern:

Übergeben Sie das Ereignis an die Funktion und verwenden Sie prepareDefault ().

$(".comment-here").click(function(e){
    e.preventDefault();
    $(".comment-form").slideToggle('slow');
})

$(".main-btn.orange").click(function(e){
    e.preventDefault();
    $(".comment-form").slideUp('slow');
})

Sie können stattdessen auch return false; verwenden, was etwas weiter geht als nur das Verhindern des Standardereignisses. Es stoppt Ereignisse bubbling bis zu parent Elementen.

16
Nick R 27 Nov. 2013 im 16:25

Fügen Sie return false; zum Klick-Handler des <a class="comment-here"> hinzu.

Im Wesentlichen ist es nicht jQuery, sondern das Standardverhalten des Browsers, das dies verursacht: Wenn Sie auf einen Link geklickt haben, muss es zu seiner href navigieren, die ... "#" ist, d. H. Zu dieser Seite. Also gehen wir zurück zu dieser Seite (oben).

1
Nikos Paraskevopoulos 27 Nov. 2013 im 16:24

Das Problem besteht darin, dass Ihr <a> -Tag href="#" verwendet, das auf die aktuelle Seite verweist und Sie nach oben zieht.

Ich würde die folgenden Ansätze anstelle der in anderen Antworten erwähnten Standardereignisverhütung empfehlen. Natürlich funktionieren diese, aber warum sollte ein Element nur verwendet werden, um seine Standardfunktionen zu entfernen?

Ergo, benutze etwas, das für deinen Zweck bestimmt ist:

1.) Verwenden Sie ein <button> anstelle von <a>:

http://jsfiddle.net/RvHjx/7/

2.) Wenn Sie <a> nicht mehr verwenden möchten, entfernen Sie das Attribut href in Ihrem <a> -Tag. Dadurch wird das blau unterstrichene Link-Styling entfernt (der Link funktioniert zwar immer noch korrekt), aber mit etwas CSS ist es einfach zu beheben:

http://jsfiddle.net/RvHjx/11/

0
skippr 27 Nov. 2013 im 18:48

Standardverhalten von Ankertags verhindern:

$(".comment-here").click(function(e){
    e.preventDefault();
    //....
});
0
A. Wolff 27 Nov. 2013 im 16:25

Javascript hinzufügen:; zu deinem a tags href ist der einfachste weg.

<a href="javascript:;">my link</a>
0
SlickRemix 8 Okt. 2017 im 16:50