Wie scrollen Sie mit JavaScript/jQuery zum Seitenanfang?

Browserübergreifende, reine JavaScript-Lösung:

document.body.scrollTop = document.documentElement.scrollTop = 0;

Sie fast haben es verstanden - Sie müssen scrollTop auf body setzen, nicht window

$(function() {
   $('body').scrollTop(0);
});

BEARBEITEN:

Vielleicht können Sie oben auf der Seite einen leeren Anker hinzufügen:

$(function() {
   $('<a name="top"/>').insertBefore($('body').children().eq(0));
   window.location.hash = 'top';
});

Gibt es eine Möglichkeit, den Browser zu VERHINDERN Scrollen zu seiner letzten Position oder zu Scrollen Sie nach oben, NACHDEM es Ding?

Die folgende Jquery-Lösung funktioniert für mich:

$(window).unload(function() {
    $('body').scrollTop(0);
});

Hier ist eine reine JavaScript-animierte Scroll-Version für no-jQuery'ers: D

var stepTime = 20;
var docBody = document.body;
var focElem = document.documentElement;

var scrollAnimationStep = function (initPos, stepAmount) {
    var newPos = initPos - stepAmount > 0 ? initPos - stepAmount : 0;

    docBody.scrollTop = focElem.scrollTop = newPos;

    newPos && setTimeout(function () {
        scrollAnimationStep(newPos, stepAmount);
    }, stepTime);
}

var scrollTopAnimated = function (speed) {
    var topOffset = docBody.scrollTop || focElem.scrollTop;
    var stepAmount = topOffset;

    speed && (stepAmount = (topOffset * stepTime)/speed);

    scrollAnimationStep(topOffset, stepAmount);
};

Und dann:

<button onclick="scrollTopAnimated(1000)">Scroll Top</button>

Das funktioniert für mich:

window.onload = function() {
    // short timeout
    setTimeout(function() {
        $(document.body).scrollTop(0);
    }, 15);
};

Verwendet eine kurze setTimeout in der onload, um dem Browser die Möglichkeit zum Blättern zu geben.

Sie können mit jQuery verwenden

jQuery(window).load(function(){

    jQuery("html,body").animate({scrollTop: 100}, 1000);

});

UPDATE

Das Navigieren zum Anfang der Seite mit einem Bildlaufeffekt ist in Javascript jetzt etwas einfacher mit:

https://developer.mozilla.org/en-US/docs/Web/API/Window/scroll

window.scroll({
 top: 0, 
 left: 0, 
 behavior: 'smooth' 
});

VORSICHT

Wir haben dies in unseren neueren Projekten verwendet, aber ich habe gerade das Mozilla-Dokument überprüft, während ich meine Antwort aktualisiert habe, und ich glaube, dass es aktualisiert wurde. Im Moment ist die Methode window.scroll(x-coord, y-coord) und erwähnt oder zeigt keine Beispiele, die den object-Parameter verwenden, in dem Sie die behavior auf smooth setzen können. Ich habe den Code gerade ausprobiert und er funktioniert immer noch in Chrome und Firefox und der Objektparameter ist immer noch in der spec .

Verwenden Sie dies also mit Vorsicht oder Sie können dieses Polyfill verwenden. Abgesehen vom Scrollen nach oben verarbeitet diese Polyfill auch andere Methoden: window.scrollBy, element.scrollIntoView usw.

ALTE ANTWORT

Dies ist unsere Vanilla javascript Implementierung. Es hat einen einfachen Beschleunigungseffekt, so dass der Benutzer nach dem Klicken auf die Schaltfläche To Top nicht geschockt wird.

Es ist sehr klein und wird noch kleiner, wenn es abgebaut wird. Entwickler, die nach einer Alternative zur Jquery-Methode suchen, aber die gleichen Ergebnisse erzielen möchten, können dies versuchen.

JS

document.querySelector("#to-top").addEventListener("click", function(){

    var toTopInterval = setInterval(function(){

        var supportedScrollTop = document.body.scrollTop > 0 ? document.body : document.documentElement;

        if (supportedScrollTop.scrollTop > 0) {
            supportedScrollTop.scrollTop = supportedScrollTop.scrollTop - 50;
        }

        if (supportedScrollTop.scrollTop < 1) {
            clearInterval(toTopInterval);
        }

    }, 10);

},false);

HTML

<button id="to-top">To Top</button>

Prost!

Verwenden Sie die folgende Funktion

window.scrollTo(xpos, ypos)

Hier ist xpos erforderlich. Die Koordinate, zu der entlang der x-Achse (horizontal) in Pixel gescrollt werden soll

ypos ist auch erforderlich. Die Koordinate, zu der entlang der y-Achse (vertikal) in Pixel gescrollt werden soll

$(function() {
    // the element inside of which we want to scroll
        var $elem = $('#content');

        // show the buttons
    $('#nav_up').fadeIn('slow');
    $('#nav_down').fadeIn('slow');  

        // whenever we scroll fade out both buttons
    $(window).bind('scrollstart', function(){
        $('#nav_up,#nav_down').stop().animate({'opacity':'0.2'});
    });
        // ... and whenever we stop scrolling fade in both buttons
    $(window).bind('scrollstop', function(){
        $('#nav_up,#nav_down').stop().animate({'opacity':'1'});
    });

        // clicking the "down" button will make the page scroll to the $elem's height
    $('#nav_down').click(
        function (e) {
            $('html, body').animate({scrollTop: $elem.height()}, 800);
        }
    );
        // clicking the "up" button will make the page scroll to the top of the page
    $('#nav_up').click(
        function (e) {
            $('html, body').animate({scrollTop: '0px'}, 800);
        }
    );
 });

Benutze das

Meine reine (animierte) Javascript-Lösung:

function gototop() {
    if (window.scrollY>0) {
        window.scrollTo(0,window.scrollY-20)
        setTimeout("gototop()",10)
    }
}

Erklärung:

window.scrollY ist eine Variable, die vom Browser verwaltet wird, um wie viel Pixel das Fenster von oben gescrollt hat.

window.scrollTo(x,y) ist eine Funktion, die das Fenster um eine bestimmte Anzahl von Pixeln auf der X-Achse und auf der Y-Achse scrollt.

Somit verschiebt window.scrollTo(0,window.scrollY-20) die Seite um 20 Pixel nach oben.

Die Variable setTimeout ruft die Funktion in 10 Millisekunden erneut auf, sodass wir sie um weitere 20 Pixel verschieben können (animiert), und die Anweisung if überprüft, ob noch ein Bildlauf erforderlich ist.

Der folgende Code funktioniert in Firefox, Chrome und Safari , konnte jedoch nicht in Internet Explorer getestet werden. Kann jemand es testen und dann meine Antwort oder Kommentar bearbeiten?

$(document).scrollTop(0);

Browserübergreifender Bildlauf nach oben: 

        if($('body').scrollTop()>0){
            $('body').scrollTop(0);         //Chrome,Safari
        }else{
            if($('html').scrollTop()>0){    //IE, FF
                $('html').scrollTop(0);
            }
        } 

Browserübergreifender Bildlauf zu einem Element mit id = div_id: 

        if($('body').scrollTop()>$('#div_id').offset().top){
            $('body').scrollTop($('#div_id').offset().top);         //Chrome,Safari
        }else{
            if($('html').scrollTop()>$('#div_id').offset().top){    //IE, FF
                $('html').scrollTop($('#div_id').offset().top);
            }
        } 

Warum verwenden Sie nicht einfach ein Referenzelement ganz am Anfang Ihrer HTML-Datei, wie z 

<div id="top"></div>

und dann, wenn die Seite geladen wird, einfach tun

$(document).ready(function(){

    top.location.href = '#top';

});

Wenn der Browser after diese Funktion auslöst, tun Sie dies einfach

$(window).load(function(){

    top.location.href = '#top';

});

Das funktioniert:

jQuery(document).ready(function() {
     jQuery("html").animate({ scrollTop: 0 }, "fast");
});

Die Kombination dieser beiden hat mir geholfen. Keine der anderen Antworten hat mir geholfen, da ich ein Sidenav hatte, das nicht scrollte.

 setTimeout(function () {
        window.scroll({
                        top: 0,
                        left: 0,
                        behavior: 'smooth'
                    });

    document.body.scrollTop = document.documentElement.scrollTop = 0;

}, 15);

Wenn Sie sich im Quirks-Modus befinden (Danke @Niet the Dark Absol)

document.body.scrollTop = document.documentElement.scrollTop = 0;

Wenn Sie sich im strikten Modus befinden:

document.documentElement.scrollTop = 0;

Hier brauchen Sie keine jQuery.

In meinem Fall funktionierte der Körper nicht:

$('body').scrollTop(0);

Aber HTML hat funktioniert:

$('html').scrollTop(0);

Um Ihre bearbeitete Frage zu beantworten, können Sie den onscroll-Handler wie folgt registrieren:

document.documentElement.onscroll = document.body.onscroll = function() {
    this.scrollTop = 0;
    this.onscroll = null;
}

Dadurch wird der erste Versuch des Bildlaufs (der wahrscheinlich vom Browser automatisch ausgeführt wird) wirksam abgebrochen.

var totop = $('#totop');
totop.click(function(){
 $('html, body').stop(true,true).animate({scrollTop:0}, 1000);
 return false;
});

$(window).scroll(function(){
 if ($(this).scrollTop() > 100){ 
  totop.fadeIn();
 }else{
  totop.fadeOut();
 }
});

<img id="totop" src="img/arrow_up.png" title="Click to go Up" style="display:none;position:fixed;bottom:10px;right:10px;cursor:pointer;cursor:hand;"/>

Wenn jemand Winkel- und Materialdesign mit Sidenav verwendet. Dies wird Sie an den Anfang der Seite senden:

let ele = document.getElementsByClassName('md-sidenav-content');
    let eleArray = <Element[]>Array.prototype.slice.call(ele);
    eleArray.map( val => {
        val.scrollTop = document.documentElement.scrollTop = 0;
    });

ohne Animation nur scroll(0, 0) (Vanilla JS)

 <script>
  sessionStorage.scrollDirection = 1;//create a session variable 
  var pageScroll = function() {
  window.scrollBy ({
   top: sessionStorage.scrollDirection,
   left: 0,
   behavior: 'smooth'
   });
   if($(window).scrollTop() + $(window).height() > $(document).height() - 1)
  {    
    sessionStorage.scrollDirection= Number(sessionStorage.scrollDirection )-300;
    setTimeout(pageScroll,50);//
   }
   else{
   sessionStorage.scrollDirection=Number(sessionStorage.scrollDirection )+1
   setTimeout(pageScroll,300); 
  }
};
pageScroll();
</script>

Seeint der Hash sollte die Arbeit erledigen. Wenn Sie eine Kopfzeile haben, können Sie verwenden 

window.location.href = "#headerid";

andernfalls funktioniert das # alleine

window.location.href = "#";

Und wenn es in die URL geschrieben wird, bleibt es beim Aktualisieren erhalten.

Eventuell benötigen Sie kein JavaScript, wenn Sie dies für ein Onclick-Ereignis tun möchten. Sie sollten einfach einen Link um Ihr Element setzen und es als href angeben.

Fügen Sie zunächst ein leeres Ankertag an der Stelle hinzu, an der Sie gehen möchten

<a href="#topAnchor"></a> 

Fügen Sie nun eine Funktion im Kopfbereich hinzu

 function GoToTop() {
            var urllocation = location.href;
            if (urllocation.indexOf("#topAnchor") > -1) {
                window.location.hash = "topAnchor";
            } else {
                return false;
            }
        }

fügen Sie dem Body-Tag schließlich ein Onload-Ereignis hinzu

<body onload="GoToTop()">

Eine generische Version, die für jeden X- und Y-Wert geeignet ist und mit der window.scrollTo-API identisch ist, nur mit dem Zusatz scrollDuration.

* Eine generische Version, die der window.scrollTo-Browser-API entspricht **

function smoothScrollTo(x, y, scrollDuration) {
    x = Math.abs(x || 0);
    y = Math.abs(y || 0);
    scrollDuration = scrollDuration || 1500;

    var currentScrollY = window.scrollY,
        currentScrollX = window.scrollX,
        dirY = y > currentScrollY ? 1 : -1,
        dirX = x > currentScrollX ? 1 : -1,
        tick = 16.6667, // 1000 / 60
        scrollStep = Math.PI / ( scrollDuration / tick ),
        cosParameterY = currentScrollY / 2,
        cosParameterX = currentScrollX / 2,
        scrollCount = 0,
        scrollMargin;

    function step() {        
        scrollCount = scrollCount + 1;  

        if ( window.scrollX !== x ) {
            scrollMargin = cosParameterX + dirX * cosParameterX * Math.cos( scrollCount * scrollStep );
            window.scrollTo( 0, ( currentScrollX - scrollMargin ) );
        } 

        if ( window.scrollY !== y ) {
            scrollMargin = cosParameterY + dirY * cosParameterY * Math.cos( scrollCount * scrollStep );
            window.scrollTo( 0, ( currentScrollY - scrollMargin ) );
        } 

        if (window.scrollX !== x || window.scrollY !== y) {
            requestAnimationFrame(step);
        }
    }

    step();
}