wake-up-neo.net

die jQuery-Methode scrollTop () funktioniert nicht

Ich habe den folgenden jQuery-Code

$(document).ready(function () {
    $('.navtoTop').click(function(){
           $("html").scrollTop( $("#topofthePage").offset().top );
    }); 
});

dabei ist 'navtoTop' die Klasse der Schaltfläche (etwas wie 'Zurück nach oben'), die die feste Position links unten auf der Seite hat und 'topofthePage' die ID des <div> ganz oben auf meiner Seite.

Ich habe das sogar versucht

$('.navtoTop').click(function(){
    $('html, body').animate({scrollTop : 0},800);
    return false;
});

Hier ist der HTML-Code

<body>
    <div id="topofthePage"></div>
    ...
    ...
    <img src="navtoTop.png" class="navtoTop">   
</body>

Ich weiß nicht, was schief läuft, aber das funktioniert nicht. Kann jemand erklären und eine gute Lösung geben? 

Fragen Sie mich nach den Details des Codes, wenn Sie möchten.

javascriptjqueryhtmlcssscroll
6
MD Danish Ansari

Sie müssen window anstelle von html verwenden:

$(window).scrollTop( $("#topofthePage").offset().top );

Beachten Sie, dass window nicht in Anführungszeichen gesetzt werden sollte, da es sich um ein Objekt und nicht um ein Tag handelt.

9
taxicala

Ein häufiges Problem bei scrollTo besteht darin, dass für das Element "html, body" in css ein Überlauf festgelegt wurde. Selten erwähnt, wenn Sie Probleme beim Scrollen/Animieren von HTML-/Body-Elementen haben und zu übermäßigem Engineering führen können. 

Wenn Überlauf gesetzt werden muss, nur auf das Body-Element setzen . Nicht beide HTML, Körper.

Es ist auch eine gute Angewohnheit, ein data- * -Attribut anstelle von Klassen oder IDs in Ihrem HTML-Code zu verwenden. Dadurch gewöhnen Sie sich an, Stile von Code zu trennen. Betrachten Sie dies, um Ihnen in Zukunft das Leben zu erleichtern:

Wiederverwendbare Scroll-Funktion erstellen 

scrollioreceiver = function(sender) {

  $(sender).on({
    click: sentFrom
  });

  function sentFrom(){
    var dataMine = $(this).attr('data-sender'),
        dataSend = $('[data-receiver="'+dataMine+'"]');

    $('html, body').animate({
        scrollTop: $(dataSend).offset().top - 70
    }, 800, function() {
        // if you need a callback function
    });
  }
}

Erstellen Sie Datenattribute für HTML-Elemente (Datenname ist beliebig und sollte sinnvoll sein):

HTML LINK HINZUFÜGEN 

<a data-sender="ScrollToMatch">Link To Click To Scroll To Match Attribute</a>

HTML ELEMENT HINZUFÜGEN 

<div data-receiver="ScrollToMatch">Scrolls To This Element</div>

VERIFY CSS »Überlauf hinzugefügt zu" html, body "funktioniert nicht

body { overflow-x: hidden; }

INIT FUNKTION AUF BEREIT »Initialisieren Sie das doc ready mit dem Attributnamenselektor, um bei mehreren Aufrufen Flexibilität zu schaffen

scrollioreceiver('[data-sender]');

Hoffe das hilft! 

3
CR Rollyson

Sie haben darauf bereits eine Antwort erhalten. Da Sie jedoch auch einen reibungslosen Bildlauf wünschen, sollten Sie die folgende Alternative in Betracht ziehen:

$('.navtoTop').click(function(){
    $('html, body').animate({
        scrollTop: $('#topofthePage').offset().top
    }, 1000);
});
1
leo.fcx