Hoe scrol ik naar de bovenkant van de pagina met JavaScript/jQuery?

Is er een manier om het scrollen in de browser te regelen met JavaScript/jQuery?

Als ik mijn pagina half naar beneden scrol en vervolgens opnieuw laden activeer, wil ik dat de pagina naar de top gaat, maar in plaats daarvan probeert het de laatste schuifpositie te vinden. Dus ik deed dit:

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

Maar geen geluk.

BEWERKEN:

Dus beide antwoorden werkten toen ik ze belde nadat de pagina was geladen. Bedankt. Als ik de pagina echter gewoon ververs, lijkt het alsof de browser berekent en naar de oude schuifpositie scrolt NA de gebeurtenis .ready(ik heb ook de functie body onload() getest).

Dus de follow-up is, is er een manier om te VOORKOMEN dat de browser naar zijn vorige positie scrolt, of om opnieuw naar boven te scrollen NADAT hij zijn ding doet?

Antwoord 1, autoriteit 100%

Wauw, ik ben 9 jaar te laat met deze vraag. Hier ga je:

Voeg deze code toe aan je onload.

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

Om het onder vensterbelasting uit te voeren, moet je het als volgt inpakken (ervan uitgaande dat er naar JQuerywordt verwezen)

$(function() {
  // put the code here
});

history.scrollRestoration Browserondersteuning:

Chrome: ondersteund (sinds 46)

Firefox: ondersteund (sinds 46)

Edge: ondersteund (sinds 79)

IE: niet ondersteund

Opera: ondersteund (sinds 33)

Safari: ondersteund

Voor IEals je opnieuw naar boven wilt scrollen NADAT het automatisch naar beneden scrolt, dan werkte dit voor mij:

var isIE11 = !!window.MSInputMethodContext && !!document.documentMode;
if(isIE11) {
    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.
} 

Antwoord 2, autoriteit 96%

Cross-browser, pure JavaScript-oplossing:

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

Antwoord 3, autoriteit 96%

Je hebt het bijna– je moet de scrollTopinstellen op body, niet op window:

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

BEWERKEN:

Misschien kun je een leeg anker bovenaan de pagina toevoegen:

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

Antwoord 4, autoriteit 35%

Is er een manier om de browser te VOORKOMEN?
scrollen naar de vorige positie, of naar
opnieuw naar boven scrollen NADAT het zijn werk doet
ding?

De volgende jQuery-oplossing werkt voor mij:

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

Antwoord 5, autoriteit 33%

Hier is een pure JavaScript-geanimeerde scroll-versie voor niet-jQuery’ers 😀

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

En dan:

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

6, Autoriteit 18%

Dit werkt voor mij:

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

Gebruikt een korte setTimeoutin de onloadom de browser de kans te geven om te scrollen.

Antwoord 7, autoriteit 18%

U kunt gebruiken met jQuery

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

Antwoord 8, autoriteit 12%

Gebruik de volgende functie

window.scrollTo(xpos, ypos)

Hier is xpos vereist. De coördinaat om naar toe te scrollen, langs de x-as (horizontaal), in pixels

ypos is ook vereist. De coördinaat om naar toe te scrollen, langs de y-as (verticaal), in pixels

Antwoord 9, autoriteit 10%

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

Gebruik dit

10, Autoriteit 8%

De volgende code werkt in Firefox, Chrome en safari , maar ik was Kan dit niet testen in internet & nbsp; Explorer. Kan iemand het testen en vervolgens mijn antwoord of commentaar bewerken?

$(document).scrollTop(0);

11, Autoriteit 8%

Mijn pure (geanimeerde) JavaScript-oplossing:

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

Uitleg:

window.scrollYis een variabele die wordt onderhouden door de browser van de hoeveelheid pixels vanaf de bovenkant waarvan het venster is gescrollen door.

window.scrollTo(x,y)is een functie die het venster een specifieke hoeveelheid pixels op de x-as en op de y-as scrollt.

Dus, window.scrollTo(0,window.scrollY-20)Verplaatst de pagina 20 pixels naar de bovenkant.

De setTimeoutroept de functie opnieuw in 10 milliseconden, zodat we het dan nog eens 20 pixels (geanimeerd) en de ifVerklaringcontroles kunnen verplaatsen als we dat nog moeten doen scroll.

12, Autoriteit 6%

Waarom gebruik je niet gewoon wat referentie-element aan het begin van je HTML-bestand, zoals

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

En dan, wanneer de pagina laadt, eenvoudigweg

$(document).ready(function(){
    top.location.href = '#top';
});

Als de browser nadatscrolt, doe je dat gewoon

$(window).load(function(){
    top.location.href = '#top';
});

Antwoord 13, autoriteit 6%

Browser scrollen naar boven:

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

Cross-browser scroll naar een element met 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);
            }
        } 

Antwoord 14, autoriteit 6%

In mijn geval werkte de body niet:

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

Maar HTML werkte:

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

Antwoord 15, autoriteit 4%

Om uw bewerkte vraag te beantwoorden, kunt u de onscroll-handler als volgt registreren:

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

Dit maakt het zo dat de eerste poging om te scrollen (die waarschijnlijk de automatische door de browser is gedaan), effectief zal worden geannuleerd.

16, Autoriteit 4%

Als u in Quircks-modus bent (bedankt @Niet het donker ABSOL):

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

Als u in strikte modus bent:

document.documentElement.scrollTop = 0;

Geen behoefte aan jQuery hier.

17, Autoriteit 4%

Dit werkt:

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

18, Autoriteit 4%

Combinatie van deze twee heeft me geholpen. Geen van de andere antwoorden heeft me geholpen sinds ik een sidenav had die niet scrollen.

setTimeout(function () {
        window.scroll({
                        top: 0,
                        left: 0,
                        behavior: 'smooth'
                    });
    document.body.scrollTop = document.documentElement.scrollTop = 0;
}, 15);

19, Autoriteit 4%

een moderne oplossing in 2021

document.body.scrollIntoView({behavior: "smooth"});

Werkt met elke browser, waaronder dwz (oudere browsers ondersteunen geen soepele scrollen).

20, Autoriteit 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;"/>

21, Autoriteit 2%

zonder animatie, alleen scroll(0, 0)(vanilla js)

22, Autoriteit 2%

Als iemand het hoek- en materiaalontwerp met SIDENAV gebruikt. Dit stuurt u naar de bovenkant van de pagina:

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

23

Seeint de hash moet het werk doen. Als u een koptekst hebt, kunt u

gebruiken

window.location.href = "#headerid";

Anders werkt de # alleen

window.location.href = "#";

En zoals deze in de URL wordt geschreven, blijft het als u zich vernieuwt.

In feite heb je geen gebeurtenis nodig JavaScript voor dat als je het wilt doen op een onClick-gebeurtenis, je moet gewoon een link plaatsen Arrond je element en geef het # als href.

24

Voeg eerst een lege ankertag toe aan de plaats waar u wilt

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

Voeg nu een functie toe in het kopgedeelte

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

voeg eindelijk een onload-gebeurtenis toe aan de body-tag

<body onload="GoToTop()">

Antwoord 25

Een generieke versie die werkt voor elke X- en Y-waarde en hetzelfde is als de window.scrollTo api, alleen met de toevoeging van scrollDuration.

*Een generieke versie die overeenkomt met de window.scrollTo browser-api**

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

Antwoord 26

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

Antwoord 27

Ik herinner me dat ik dit ergens anders heb gepost (ik kon niet vinden waar), maar dit werkt heel goed:

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

Het is raar, maar de manier waarop het werkt, is gebaseerd op de manier waarop de stapelwachtrij van JavaScript werkt. De volledige uitleg vindt u hierin de sectie Zero Delays.

Het basisidee is dat de tijd voor setTimeoutniet de ingestelde hoeveelheid tijd specificeert die het zal wachten, maar de minimale hoeveelheid tijd die het zal wachten. Dus als je hem vertelt 0ms te wachten, voert de browser alle andere processen in de wachtrij uit (zoals het scrollen van het venster naar waar je het laatst was) en voert vervolgens de callback uit.