Scorrere fino all'inizio della pagina utilizzando JavaScript?

Come scorrere fino all'inizio della pagina usando un JavaScript? È auspicabile anche se la barra di scorrimento salta all'istante verso l'alto. Non sto cercando uno scorrimento regolare.

Se non è necessario animare la modifica, non è necessario utilizzare alcun plug-in speciale: utilizzerei solo il metodo nativo window.scroll JavaScript. Passando in 0,0, la pagina scorrerà all'istante in alto a sinistra all'istante .

window.scrollTo(x-coord, y-coord);

parametri

• x-coord è il pixel lungo l'asse orizzontale.
• y-coord è il pixel lungo l'asse verticale.

Se vuoi uno scorrimento fluido, prova qualcosa del genere:

$("a[href='#top']").click(function() {
  $("html, body").animate({ scrollTop: 0 }, "slow");
  return false;
});

Questo prenderà qualsiasi <a>tag di cui href="#top"e renderà più fluido lo scorrimento verso l'alto.

Prova questo per scorrere in alto

<script>
 $(document).ready(function(){
    $(window).scrollTop(0);
});
</script>

Migliore soluzione con animazioni fluide:

// this changes the scrolling behavior to "smooth"
window.scrollTo({ top: 0, behavior: 'smooth' });

Riferimento: https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo#Example

Non hai bisogno di jQuery per farlo. Un tag HTML standard sarà sufficiente ...

<div id="jump_to_me">
    blah blah blah
</div>

<a target="#jump_to_me">Click Here To Destroy The World!</a>

Tutti questi suggerimenti funzionano perfettamente per varie situazioni. Per coloro che trovano questa pagina attraverso una ricerca, si può anche provare questo . JQuery, nessun plug-in, scorrere fino all'elemento.

$('html, body').animate({
    scrollTop: $("#elementID").offset().top
}, 2000);

scorrimento regolare, javascript puro:

(function smoothscroll(){
    var currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
    if (currentScroll > 0) {
         window.requestAnimationFrame(smoothscroll);
         window.scrollTo (0,currentScroll - (currentScroll/5));
    }
})();

<script>
$(function(){
   var scroll_pos=(0);          
   $('html, body').animate({scrollTop:(scroll_pos)}, '2000');
});
</script>

Modificare:

$('html, body').animate({scrollTop:(scroll_pos)}, 2000);

Un altro modo di scorrere con il margine superiore e sinistro:

window.scrollTo({ top: 100, left: 100, behavior: 'smooth' });

<script>

  $("a[href='#top']").click(function() {
     $("html, body").animate({ scrollTop: 0 }, "slow");
     return false;
  });
</script>

in html

<a href="#top">go top</a>

Davvero strano: questa domanda è attiva da cinque anni e non esiste ancora una risposta JavaScript alla vaniglia per animare lo scorrimento ... Quindi ecco qui:

var scrollToTop = window.setInterval(function() {
    var pos = window.pageYOffset;
    if ( pos > 0 ) {
        window.scrollTo( 0, pos - 20 ); // how far to scroll on each step
    } else {
        window.clearInterval( scrollToTop );
    }
}, 16); // how fast to scroll (this equals roughly 60 fps)

Se lo desideri, puoi racchiuderlo in una funzione e chiamarlo tramite l' onclickattributo. Dai un'occhiata a questo jsfiddle

Nota: questa è una soluzione molto semplice e forse non la più performante. Un esempio molto elaborato può essere trovato qui: https://github.com/cferdinandi/smooth-scroll

Se si desidera eseguire uno scorrimento regolare, provare questo:

$("a").click(function() {
     $("html, body").animate({ scrollTop: 0 }, "slow");
     return false;
});

Un'altra soluzione è il metodo window.scroll JavaScript:

 window.scrollTo(x-value, y-value);

Parametri:

• il valore x è il pixel lungo l'asse orizzontale.
• il valore y è il pixel lungo l'asse verticale.

Con window.scrollTo(0, 0);è molto veloce,
quindi ho provato l'esempio di Mark Ursino, ma in Chrome non succede nulla
e l'ho trovato

$('.showPeriodMsgPopup').click(function(){
    //window.scrollTo(0, 0);
    $('html').animate({scrollTop:0}, 'slow');//IE, FF
    $('body').animate({scrollTop:0}, 'slow');//chrome, don't know if Safari works
    $('.popupPeriod').fadeIn(1000, function(){
        setTimeout(function(){$('.popupPeriod').fadeOut(2000);}, 3000);
    });
});

testato tutti e 3 i browser e funziona
sto usando blueprint css
questo è quando un client fa clic sul pulsante "Prenota ora" e non ha il periodo di noleggio selezionato, si sposta lentamente verso l'alto dove sono i calendari e apre una finestra di dialogo che punta a i 2 campi, dopo 3 secondi svanisce

Un sacco di utenti consiglia di selezionare sia i tag html e corpo per la compatibilità cross-browser, in questo modo:

$('html, body').animate({ scrollTop: 0 }, callback);

Questo può farti inciampare se stai contando sul tuo callback in esecuzione solo una volta. In effetti verrà eseguito due volte perché hai selezionato due elementi.

Se questo è un problema per te, puoi fare qualcosa del genere:

function scrollToTop(callback) {
    if ($('html').scrollTop()) {
        $('html').animate({ scrollTop: 0 }, callback);
        return;
    }

    $('body').animate({ scrollTop: 0 }, callback);
}

Il motivo per cui funziona è in Chrome che $('html').scrollTop()restituisce 0, ma non in altri browser come Firefox.

Se non vuoi attendere il completamento dell'animazione nel caso in cui la barra di scorrimento sia già in alto, prova questo:

function scrollToTop(callback) {
    if ($('html').scrollTop()) {
        $('html').animate({ scrollTop: 0 }, callback);
        return;
    }

    if ($('body').scrollTop()) {
        $('body').animate({ scrollTop: 0 }, callback);
        return;
    }

    callback();
}

Il vecchio #toppuò fare il trucco

document.location.href = "#top";

Funziona bene in FF, IE e Chrome

Prova questo

<script>
    $(window).scrollTop(100);
</script>

$(document).scrollTop(0); funziona anche.

Soluzione non jQuery / JavaScript puro:

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

Questo funzionerà:

window.scrollTo(0, 0);

Prova questo codice:

$('html, body').animate({
    scrollTop: $("div").offset().top
}, time);

div => elemento Dom in cui si desidera spostare lo scorrimento.

time => millisecondi, definisce la velocità di scorrimento.

Pura soluzione JavaScript:

function scrollToTop() {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
});

Scrivo una soluzione animata su Codepen

Inoltre, puoi provare un'altra soluzione con la scroll-behavior: smoothproprietà CSS .

html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

Perché non usi la funzione integrata JQuery scrollTop:

$('html, body').scrollTop(0);//For scrolling to top

$("body").scrollTop($("body")[0].scrollHeight);//For scrolling to bottom

Breve e semplice!

Non hai bisogno di JQuery. Puoi semplicemente chiamare la sceneggiatura

window.location = '#'

al clic del pulsante "Vai all'inizio"

Demo di esempio:

output.jsbin.com/fakumo#

PS: non utilizzare questo approccio quando si utilizzano librerie moderne come angularjs. Ciò potrebbe interrompere l'URL hashbang.

Usa semplicemente questo script per scorrere verso l'alto diretto.

<script>
$(document).ready(function(){
    $("button").click(function(){
        ($('body').scrollTop(0));
    });
});
</script>

Se non si desidera lo scorrimento regolare, è possibile imbrogliare e interrompere l'animazione a scorrimento regolare non appena si avvia ... in questo modo:

   $(document).ready(function() {
      $("a[href='#top']").click(function() {
          $("html, body").animate({ scrollTop: 0 }, "1");              
          $('html, body').stop(true, true);

          //Anything else you want to do in the same action goes here

          return false;                              
      });
  });

Non ho idea se sia consigliato / consentito, ma funziona :)

Quando lo useresti? Non sono sicuro, ma forse quando vuoi usare un clic per animare una cosa con Jquery, ma ne fai un'altra senza animazione? vale a dire aprire un pannello di accesso dell'amministratore slide-in nella parte superiore della pagina e saltare immediatamente in alto per vederlo.

Motivazione

Questa semplice soluzione funziona in modo nativo e implementa uno scorrimento uniforme in qualsiasi posizione.

Evita l'uso di collegamenti di ancoraggio (quelli con #) che, a mio avviso, sono utili se vuoi collegarti a una sezione, ma non sono così comodi in alcune situazioni, specialmente quando si punta verso l'alto che potrebbe portare a due URL diversi che puntano al stessa posizione ( http://www.example.org e http://www.example.org/# ).

Soluzione

Inserisci un ID nel tag che desideri scorrere, ad esempio la tua prima sezione , che risponde a questa domanda, ma l' id potrebbe essere posizionato ovunque nella pagina.

<body>
  <section id="top">
    <!-- your content -->
  </section>
  <div id="another"><!-- more content --></div>

Quindi come pulsante è possibile utilizzare un collegamento, basta modificare l' attributo onclick con un codice come questo.

<a onclick="document.getElementById('top').scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' })">Click me</a>

Dove l'argomento di document.getElementByIdè l' id del tag che si desidera scorrere dopo il clic.

Puoi semplicemente usare un target dal tuo link, come #someid, dove #someid è l'ID del div.

In alternativa, è possibile utilizzare un numero qualsiasi di plugin di scorrimento che lo rendono più elegante.

http://plugins.jquery.com/project/Scroll Questo è un esempio.

Puoi provare a usare JS come in questo violino http://jsfiddle.net/5bNmH/1/

Aggiungi il pulsante "Vai all'inizio" nel piè di pagina:

<footer>
    <hr />
    <p>Just some basic footer text.</p>
    <!-- Go to top Button -->
    <a href="#" class="go-top">Go Top</a>
</footer>

function scrolltop() {

    var offset = 220;
    var duration = 500;

    jQuery(window).scroll(function() {
        if (jQuery(this).scrollTop() > offset) {
            jQuery('#back-to-top').fadeIn(duration);
        } else {
            jQuery('#back-to-top').fadeOut(duration);
        }
    });

    jQuery('#back-to-top').click(function(event) {
        event.preventDefault();
        jQuery('html, body').animate({scrollTop: 0}, duration);
        return false;
    });
}

Nessuna delle risposte sopra funzionerà in SharePoint 2016.

Deve essere fatto in questo modo: /sharepoint/195870/

var w = document.getElementById("s4-workspace");
w.scrollTop = 0;