Wie scrolle ich mit JavaScript / jQuery zum Seitenanfang?

Gibt es eine Möglichkeit, das Scrollen des Browsers mit JavaScript / jQuery zu steuern?

Wenn ich meine Seite halb nach unten scrolle und dann ein erneutes Laden auslöse, soll die Seite nach oben gepackt werden, aber stattdessen wird versucht, die letzte Bildlaufposition zu finden. Also habe ich das gemacht:

$('document').ready(function() {
   $(window).scrollTop(0);
});

Aber kein Glück.

EDIT :

Ihre beiden Antworten haben also funktioniert, wenn ich sie nach dem Laden der Seite anrufe. Danke. Wenn ich jedoch nur eine Aktualisierung der Seite durchführe, sieht es so aus, als würde der Browser nach dem .readyEreignis berechnen und zu seiner alten Bildlaufposition scrollen (ich habe auch die Funktion body onload () getestet).

Das Follow-up lautet also: Gibt es eine Möglichkeit, zu verhindern, dass der Browser zu seiner vorherigen Position scrollt, oder erneut nach oben zu scrollen, nachdem er seine Sache getan hat?

Wow, ich bin 9 Jahre zu spät bei dieser Frage. Bitte schön:

Fügen Sie diesen Code Ihrer Onload hinzu.

// This prevents the page from scrolling down to where it was previously.
if ('scrollRestoration' in history) {
    history.scrollRestoration = 'manual';
}
// This is needed if the user scrolls down during page load and you want to make sure the page is scrolled to the top once it's fully loaded. This has Cross-browser support.
window.scrollTo(0,0);

history.scrollRestoration Browser-Unterstützung:

Chrome: unterstützt (seit 46)

Firefox: unterstützt (seit 46)

IE / Edge: nicht unterstützt (noch ..)

Oper: unterstützt (seit 33)

Safari: unterstützt

Wenn Sie für IE / Edge nach dem automatischen Scrollen nach unten erneut nach oben scrollen möchten, hat dies für mich funktioniert:

var isIE11 = !!window.MSInputMethodContext && !!document.documentMode;
var isEdge = /Edge/.test(navigator.userAgent);
if(isIE11 || isEdge) {
    setTimeout(function(){ window.scrollTo(0, 0); }, 300);  // adjust time according to your page. The better solution would be to possibly tie into some event and trigger once the autoscrolling goes to the top.
} 

Browserübergreifende, reine JavaScript-Lösung:

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

Sie haben es fast geschafft - Sie müssen das scrollTopeinschalten body, 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 daran zu hindern, zu seiner vorherigen Position zu scrollen, oder erneut nach oben zu scrollen, nachdem er seine Sache getan hat?

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

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

Hier ist eine reine animierte JavaScript-Scroll-Version für No-jQuery'er: 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>

AKTUALISIEREN

Mit einem Bildlaufeffekt zum Seitenanfang zu gelangen, ist in Javascript jetzt etwas einfacher:

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, es wurde aktualisiert. Im Moment ist das Verfahren window.scroll(x-coord, y-coord)und nicht erwähnt oder Beispiele zeigen , dass die Verwendung objectParameter in dem Sie die festlegen behaviorzu smooth. Ich habe gerade den Code ausprobiert und er funktioniert immer noch in Chrome und Firefox und der Objektparameter befindet sich immer noch in der Spezifikation .

Verwenden Sie dies also mit Vorsicht, oder Sie können diese Polyfüllung verwenden . Abgesehen von nach oben scrollen, diese polyfill behandelt auch andere Methoden: window.scrollBy, element.scrollIntoViewusw.

ALTE ANTWORT

Dies ist unsere Vanille- javascriptImplementierung. Es hat einen einfachen Lockerungseffekt, damit der Benutzer nach dem Klicken auf die Schaltfläche Nach oben nicht schockiert wird .

Es ist sehr klein und wird noch kleiner, wenn es verkleinert wird. Entwickler, die nach einer Alternative zur jquery-Methode suchen, aber dieselben 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!

Das funktioniert bei mir:

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

Verwendet einen Kurzschluss setTimeoutin onload, um dem Browser die Möglichkeit zu geben, den Bildlauf durchzuführen.

Sie können mit jQuery verwenden

jQuery(window).load(function(){

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

});

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 ebenfalls 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

Der folgende Code funktioniert in Firefox, Chrome und Safari , aber ich konnte ihn in Internet Explorer nicht testen. Kann jemand es testen und dann meine Antwort bearbeiten oder kommentieren?

$(document).scrollTop(0);

Meine reine (animierte) Javascript-Lösung:

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

Erläuterung:

window.scrollY ist eine vom Browser verwaltete Variable für die Anzahl der Pixel von oben, um die das Fenster gescrollt wurde.

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 window.scrollTo(0,window.scrollY-20)bewegt sich die Seite 20 Pixel nach oben.

Das setTimeoutruft die Funktion in 10 Millisekunden erneut auf, damit wir sie dann um weitere 20 Pixel (animiert) verschieben können, und die ifAnweisung prüft, ob noch gescrollt werden muss.

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 nach dem Auslösen dieser Funktion einen Bildlauf durchführt, tun Sie dies einfach

$(window).load(function(){

    top.location.href = '#top';

});

Browserübergreifend nach oben scrollen:

        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);
            }
        } 

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

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

Dadurch wird der erste Bildlaufversuch (der wahrscheinlich automatisch vom Browser ausgeführt wird) effektiv abgebrochen.

Wenn Sie sich im Quircks-Modus befinden (danke @Niet the Dark Absol):

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

Wenn Sie sich im strengen Modus befinden:

document.documentElement.scrollTop = 0;

Hier ist jQuery nicht erforderlich.

Das funktioniert:

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

In meinem Fall hat der Körper nicht funktioniert:

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

Aber HTML hat funktioniert:

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

Die Kombination dieser beiden hat mir geholfen. Keine der anderen Antworten half mir, 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);

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;"/>

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

Wenn jemand mit sidenav eckiges und materielles Design verwendet. Dadurch gelangen Sie zum Anfang der Seite:

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

Seeint der Hash sollte den Job machen. Wenn Sie einen Header 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, wenn Sie es aktualisieren.

Tatsächlich benötigen Sie kein JavaScript-Ereignis, wenn Sie dies bei einem Onclick-Ereignis tun möchten, sollten Sie einfach einen Link um Ihr Element setzen und ihm # als href geben.

Fügen Sie zuerst ein leeres Ankertag an der Stelle hinzu, an die Sie gehen möchten

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

Fügen Sie nun eine Funktion im Header-Bereich 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 funktioniert und mit der window.scrollTo-API identisch ist, nur mit dem Zusatz scrollDuration.

* Eine generische Version, die mit der window.scrollTo-Browser-API übereinstimmt **

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();
}

Ich erinnere mich, dass ich das woanders gepostet habe (ich konnte nicht finden, wo), aber das funktioniert wirklich gut:

setTimeout(() => {
    window.scrollTo(0, 0);
}, 0);

Es ist seltsam, aber die Funktionsweise basiert auf der Funktionsweise der Stapelwarteschlange von JavaScript. Die vollständige Erklärung finden Sie hier im Abschnitt Zero Delays.

Die Grundidee ist, dass die Zeit für setTimeoutnicht die festgelegte Wartezeit angibt, sondern die minimale Wartezeit. Wenn Sie also anweisen, 0 ms zu warten, führt der Browser alle anderen Prozesse in der Warteschlange aus (z. B. das Fenster zu dem Ort scrollen, an dem Sie zuletzt waren) und führt dann den Rückruf aus.

 <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>