wake-up-neo.net

Wie scrollen Sie 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 Neuladen auslöst, möchte ich, dass die Seite nach oben packt, stattdessen versucht sie, die letzte Bildlaufposition zu finden. Also habe ich das gemacht:

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

Aber kein Glück.

EDIT:

Ihre beiden Antworten funktionierten also, 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 .ready -Ereignis berechnen und zu seiner alten Bildlaufposition scrollen (ich habe auch die body-Funktion onload () getestet).

Also ist die Folge, gibt es eine Möglichkeit, den Browser daran zu hindern, an seine frühere Position zu scrollen, oder nach oben zu scrollen, nachdem er seine Sache getan hat?

137
Yarin

Browserübergreifende, reine JavaScript-Lösung:

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

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';
});
83
Jacob Relkin

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

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

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.

8
user113716

Sie können mit jQuery verwenden

jQuery(window).load(function(){

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

});
7

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!

7
Jo E.

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

5
Shoaib Quraishi
$(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

5
Ekin Ertaç

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.

4
Toastrackenigma

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);
4
bigblind

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

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

});
3
arik

Das funktioniert:

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

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

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.

2
Zlatan

In meinem Fall funktionierte der Körper nicht:

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

Aber HTML hat funktioniert:

$('html').scrollTop(0);
2
Sachin Prasad

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.

2
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;"/>
1
user3178603

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

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

1
maxbellec
 <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>
0
Kenrick Humber

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.

0
xavierm02

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()">
0
Satii

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