Come scorrere fino all'inizio della pagina con JavaScript / jQuery?

Esiste un modo per controllare lo scorrimento del browser con JavaScript / jQuery?

Quando scorro la mia pagina a metà, quindi innesco un ricaricamento, voglio che la pagina vada in cima, ma invece cerca di trovare l'ultima posizione di scorrimento. Quindi ho fatto questo:

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

Ma niente fortuna.

MODIFICA :

Quindi entrambe le tue risposte hanno funzionato quando le ho chiamate dopo il caricamento della pagina. Grazie. Tuttavia, se faccio solo un aggiornamento sulla pagina, sembra che il browser calcoli e scorra fino alla sua vecchia posizione di scorrimento DOPO l' .readyevento (ho testato anche la funzione body onload ()).

Quindi il follow-up è, c'è un modo per PREVENIRE che il browser scorra fino alla sua posizione passata o per scorrere nuovamente verso l'alto DOPO che fa le sue cose?

Wow, sono in ritardo di 9 anni a questa domanda. Ecco qui:

Aggiungi questo codice al tuo 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);

history.scrollRestoration Supporto per browser:

Chrome: supportato (dal 46)

Firefox: supportato (dal 46)

IE / Edge: non supportato (Yet ..)

Opera: supportato (dal 33)

Safari: supportato

Per IE / Edge se si desidera scorrere nuovamente verso l'alto DOPO che si scorre automaticamente verso il basso, questo ha funzionato per me:

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

Cross-browser, soluzione JavaScript pura:

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

È quasi capito bene - è necessario impostare l' scrollTopon body, non è window:

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

MODIFICARE:

Forse puoi aggiungere un'ancora vuota nella parte superiore della pagina:

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

C'è un modo per PREVENIRE che il browser scorra fino alla sua posizione passata o per scorrere nuovamente verso l'alto dopo che fa la sua cosa?

La seguente soluzione jquery funziona per me:

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

Ecco una pura versione di scorrimento animata JavaScript per 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);
};

E poi:

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

AGGIORNARE

Andare all'inizio della pagina con un effetto di scorrimento è un po 'più semplice in javascript ora con:

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

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

ATTENZIONE

Abbiamo usato questo nei nostri progetti più recenti, ma ho appena controllato il documento mozilla in questo momento mentre aggiornavo la mia risposta e credo che sia stato aggiornato. In questo momento il metodo è window.scroll(x-coord, y-coord)e non menziona né mostra esempi che utilizzano il objectparametro in cui è possibile impostare behaviorsu smooth. Ho appena provato il codice e funziona ancora in Chrome e Firefox e il parametro object è ancora nelle specifiche .

Quindi usa questo con cautela o puoi usare questo Polyfill . A parte lo scorrimento verso l'alto, questo polyfill gestisce anche altri metodi: window.scrollBy, element.scrollIntoView, etc.

VECCHIA RISPOSTA

Questa è la nostra javascriptimplementazione alla vaniglia . Ha un semplice effetto di attenuazione in modo che l'utente non rimanga scioccato dopo aver fatto clic sul pulsante In alto .

È molto piccolo e diventa ancora più piccolo quando viene minimizzato. Gli sviluppatori alla ricerca di un'alternativa al metodo jquery ma vogliono gli stessi risultati possono provare questo.

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>

Saluti!

Questo funziona per me:

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

Utilizza un breve setTimeoutall'interno di onloadper dare al browser la possibilità di eseguire lo scorrimento.

È possibile utilizzare con jQuery

jQuery(window).load(function(){

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

});

Utilizzare la seguente funzione

window.scrollTo(xpos, ypos)

Qui è richiesto xpos. Le coordinate su cui scorrere, lungo l'asse x (orizzontale), in pixel

ypos è anche richiesto. Le coordinate su cui scorrere, lungo l'asse y (verticale), in pixel

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

Usa questo

Il seguente codice funziona in Firefox, Chrome e Safari , ma non sono stato in grado di testarlo in Internet Explorer. Qualcuno può testarlo e quindi modificare la mia risposta o commentarla?

$(document).scrollTop(0);

La mia soluzione Javascript pura (animata):

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

Spiegazione:

window.scrollY è una variabile gestita dal browser della quantità di pixel dall'alto in cui è stata fatta scorrere la finestra.

window.scrollTo(x,y) è una funzione che fa scorrere la finestra di una quantità specifica di pixel sull'asse xe sull'asse y.

Pertanto, window.scrollTo(0,window.scrollY-20)sposta la pagina di 20 pixel verso l'alto.

La setTimeoutchiama la funzione di nuovo in 10 millisecondi in modo che possiamo quindi spostarlo altri 20 pixel (animati), e le ifverifiche economico se abbiamo ancora bisogno di scorrimento.

Perché non usi solo qualche elemento di riferimento all'inizio del tuo file html, come

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

e poi, quando la pagina viene caricata, semplicemente

$(document).ready(function(){

    top.location.href = '#top';

});

Se il browser scorre dopo l' attivazione di questa funzione, lo fai semplicemente

$(window).load(function(){

    top.location.href = '#top';

});

Cross-browser scorrere verso l'alto:

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

Cross-browser scorrere fino a un elemento con 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);
            }
        } 

Per rispondere alla domanda modificata, è possibile registrare il onscrollgestore in questo modo:

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

Ciò consentirà di annullare efficacemente il primo tentativo di scorrimento (che è probabilmente quello automatico eseguito dal browser).

Se sei in modalità Quircks (grazie @Niet the Dark Absol):

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

Se sei in modalità rigorosa:

document.documentElement.scrollTop = 0;

Non c'è bisogno di jQuery qui.

Questo sta funzionando:

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

Nel mio caso il corpo non ha funzionato:

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

Ma HTML ha funzionato:

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

La combinazione di questi due mi ha aiutato. Nessuna delle altre risposte mi ha aiutato poiché avevo un sidenav che non scorreva.

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

senza animazione, solo scroll(0, 0)(vaniglia JS)

Se qualcuno utilizza design angolare e materiale con sidenav. Questo ti invierà in cima alla 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;
    });

Seeint l'hash dovrebbe fare il lavoro. Se hai un'intestazione, puoi usare

window.location.href = "#headerid";

altrimenti, solo # funzionerà

window.location.href = "#";

E mentre viene scritto nell'URL, rimarrà se aggiorni.

In effetti, non hai bisogno di JavaScript per questo se vuoi farlo su un evento onclick, dovresti semplicemente mettere un link intorno al tuo elemento e dargli # come href.

Per prima cosa aggiungi un tag di ancoraggio vuoto nel punto in cui vuoi andare

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

Ora aggiungi una funzione nella sezione header

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

infine aggiungi un evento onload al tag body

<body onload="GoToTop()">

Una versione generica che funziona con qualsiasi valore X e Y, ed è uguale a window.scrollTo api, solo con l'aggiunta di scrollDuration.

* Una versione generica corrispondente a window.scroll Per l'API del browser **

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

Ricordo di aver visto questo post da qualche altra parte (non riuscivo a trovare dove), ma funziona davvero bene:

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

È strano, ma il modo in cui funziona si basa sul modo in cui funziona la coda di stack di JavaScript. La spiegazione completa è disponibile qui nella sezione Ritardi zero.

L'idea di base è che il tempo per setTimeoutnon specifica effettivamente il tempo impostato che attenderà, ma il tempo minimo che attenderà. Quindi quando gli dici di aspettare 0ms, il browser esegue tutti gli altri processi in coda (come scorrere la finestra fino a dove eri l'ultima volta) e quindi esegue il callback.

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