it-swarm.it

Scorrere fino all'inizio della pagina utilizzando JavaScript/jQuery?

Ho un <button> sulla pagina, quando viene premuto questo pulsante un <div> nascosto viene mostrato usando jQuery.

Come faccio a scorrere verso l'alto della pagina usando un comando JavaScript/jQuery in quella funzione? È auspicabile anche se la barra di scorrimento salta istantaneamente verso l'alto. Non sto cercando uno scorrimento fluido.

1383
KingNestor

Se non hai bisogno della modifica per animare, non hai bisogno di usare alcun plugin speciale - io semplicemente utilizzerei il metodo nativo JavaScript.scrollTo - passando in 0,0 scorrerà la pagina 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. 
1894
daniellmb

Se vuoi uno scorrimento uniforme, prova qualcosa del genere:

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

Ciò richiederà qualsiasi tag <a> il cui href="#top" e lo renderà scorrevole fino alla cima.

1250
Mark Ursino

Prova a farlo scorrere in alto

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

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

Tutti questi suggerimenti funzionano alla grande per varie situazioni. Per coloro che trovano questa pagina attraverso una ricerca, si può anche dare this a try. JQuery, nessun plug-in, scorri fino all'elemento.

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

scroll scorrevole, puro javascript:

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

Soluzione migliore con animazione fluida:

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

29
Ganesh Ghalame

Se vuoi fare uno scorrimento regolare, prova questo:

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

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

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

Parametri:

  • il valore x è il pixel lungo l'asse orizzontale.
  • valore y è il pixel lungo l'asse verticale.
28
Gaurang Sondagar
<script>

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

in html

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

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

$('.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 cian blueprint
questo è quando un cliente 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 div che punta ai 2 campi, dopo 3 secondi svanisce

24
Luiggi ZAMOL

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

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 chiamarla tramite l'attributo onclick. Controlla 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

23
AvL

A lottodiutenti consiglio di selezionare i tag html e body per la compatibilità cross-browser, in questo modo:

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

Questo può farti inciampare anche se stai contando sul tuo callback in esecuzione una sola 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);
}

La ragione per cui funziona in Chrome $('html').scrollTop() restituisce 0, ma non in altri browser come Firefox.

Se non vuoi aspettare 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();
}
22
David Kennedy

Il vecchio #top può fare il trucco 

document.location.href = "#top";

Funziona bene in FF, IE e Chrome

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

Modificare:

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

Prova questo

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

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

14
Hari Ganesan

Soluzione non jQuery/puro JavaScript:

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

Funzionerà:

window.scrollTo(0, 0);

10
Santosh Jadi

Prova questo codice:

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

div => Dom Elemento in cui si desidera spostare lo scroll.

tempo => millisecondi, definire la velocità della scroll.

10
Wasif Ali

$(".scrolltop").click(function() {
  $("html, body").animate({ scrollTop: 0 }, "slow");
  return false;
});
.section{
 height:400px;
}
.section1{
  background-color: #333;
}
.section2{
  background-color: red;
}
.section3{
  background-color: yellow;
}
.section4{
  background-color: green;
}
.scrolltop{
  position:fixed;
  right:10px;
  bottom:10px;
  color:#fff;
}
<html>
<head>
<title>Scroll top demo</title>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<div class="content-wrapper">
<div class="section section1"></div>
<div class="section section2"></div>
<div class="section section3"></div>
<div class="section section4"></div>
<a class="scrolltop">Scroll top</a>
</div>

</body>
</html>

10
arvinda kumar

Perché non usi la funzione incorporata di JQuery scrollTop:

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

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

Breve e semplice!

8
Sandeep Gantait

Basta usare questo script per scorrere verso l'alto diretto.

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

Non hai bisogno di JQuery. Semplicemente puoi 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 rompere l'hashbang dell'URL.

Se non vuoi uno scorrimento fluido, puoi imbrogliare e interrompere l'animazione di scorrimento scorrevole praticamente non appena la avvii ... 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/permesso, 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? Ad esempio, apri un pannello di login dell'amministratore nella parte superiore della pagina e salta immediatamente in alto per vederlo.

6
Jon Story

Motivazione

Questa semplice soluzione funziona in modo nativo e implementa una pergamena scorrevole in qualsiasi posizione.

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

Soluzione

Metti un id sul tag che vuoi scorrere, ad esempio il tuo primo sezione, che risponde a questa domanda, ma il id potrebbe essere posizionato ovunque nella pagina.

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

Quindi come pulsante puoi usare un link, modifica 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 è il id del tag che si desidera scorrere dopo il clic.

6
Gianluca Casati

Potresti semplicemente usare un bersaglio dal tuo link, come #someid, dove #someid è l'id del div.

Oppure, puoi utilizzare qualsiasi numero di plugin a scorrimento che lo rendano più elegante.

http://plugins.jquery.com/project/ScrollTo è un esempio.

5
ScottE

Puoi provare a usare JS come in questo Fiddle 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>
4
asertym

Nessuna delle risposte sopra funzionerà in SharePoint 2016.

Deve essere fatto in questo modo: https://sharepoint.stackexchange.com/questions/195870/

var w = document.getElementById("s4-workspace");
w.scrollTop = 0;
4
jeancallisti
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;
    });
}
4
Mardzis

Attiva tutto il browser. In bocca al lupo

var process;
        var delay = 50; //milisecond scroll top
        var scrollPixel = 20; //pixel U want to change after milisecond
        //Fix Undefine pageofset when using IE 8 below;
        function getPapeYOfSet() {
            var yOfSet = (typeof (window.pageYOffset) === "number") ? window.pageYOffset : document.documentElement.scrollTop;
            return yOfSet;
        }



        function backToTop() {
            process = setInterval(function () {
                var yOfSet = getPapeYOfSet();
                if (yOfSet === 0) {
                    clearInterval(process);
                } else {
                    window.scrollBy(0, -scrollPixel);
                }
            }, delay);
        }
3
Anh Tran

Prova questo

<script>
  $(function(){
   $('a').click(function(){
    var href =$(this).attr("href");
   $('body, html').animate({
     scrollTop: $(href).offset().top
     }, 1000)
  });
 });
 </script>
3
Eugeni Bejan

Se desideri scorrere fino a un elemento con un ID, prova questo:

$('a[href^="#"]').bind('click.smoothscroll',function (e) {
    e.preventDefault();
    var target = this.hash;
    $target = $(target);
    $('html, body').stop().animate({
        'scrollTop': $target.offset().top
    }, 700, 'swing', function () {
        window.location.hash = target;
    });
});``
2
Alan Kael Ball

Quando lo scorrimento superiore è superiore al limite inferiore e inferiore a quello superiore, l'intestazione è appiccicosa. Sotto vedi Fiddle Esempio.

var lastScroll = 0;

$(document).ready(function($) {

$(window).scroll(function(){

 setTimeout(function() { 
    var scroll = $(window).scrollTop();
    if (scroll > lastScroll) {

        $("header").removeClass("menu-sticky");

    } 
    if (scroll == 0) {
    $("header").removeClass("menu-sticky");

    }
    else if (scroll < lastScroll - 5) {


        $("header").addClass("menu-sticky");

    }
    lastScroll = scroll;
    },0);
    });
   });

https://jsfiddle.net/memdumusaib/d52xcLm3/

1
Musaib Memdu

Basta provare, non c'è bisogno di altri plugin/framework

document.getElementById("jarscroolbtn").addEventListener("click", jarscrollfunction);

function jarscrollfunction() {
  var body = document.body; // For Safari
  var html = document.documentElement; // Chrome, Firefox, IE and Opera 
  body.scrollTop = 0; 
  html.scrollTop = 0;
}
<button id="jarscroolbtn">Scroll contents</button> 
html, body {
  scroll-behavior: smooth;
}
0
rajmobiapp

Per scorrere l'elemento e l'elemento nella parte superiore della pagina

WebElement tempElement=driver.findElement(By.cssSelector("input[value='Excel']"));

            ((JavascriptExecutor) driver).executeScript("arguments[0].scrollIntoView(true);", tempElement);
0
Priyanka

document.getElementById("id of what you want to scroll to").scrollIntoView();

0
GameMaster