Come saltare all'inizio della pagina del browser

186

Sto scrivendo un popup modale e ho bisogno che il browser salti in cima allo schermo quando viene premuto il pulsante modale aperto. C'è un modo per scorrere il browser verso l'alto usando jQuery?

— Exitos
fonte

405

È possibile impostare scrollTop, in questo modo:

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

O se vuoi una piccola animazione invece di uno snap verso l'alto:

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

— Nick Craver
fonte

1

buono ... Ho usato scrollTo plugin per jQuery prima di farlo - avrei potuto salvare un po 'di codice con il tuo codice ... grazie per la lezione ;-)

— Zathrus Writer

@MikhailBatcer: disabilita il tuo CSS e verifica se funziona. Potresti avere un problema con il modo in cui hai disegnato i tuoi tag htmle body. altrimenti usa $(window)invece.

— invoca il

come aggiungere la durata per l'animazione-skrolling?

— Maxim Strutinskiy,

139

Senza animazione, puoi usare JS semplice:

scroll(0,0)

Con l'animazione, controlla la risposta di Nick .

— Ionuț Staicu
fonte

4

È supportato in tutti i browser?

— Pacerier,

1

scrollè nello standard CSSOM mentre scrollToera originariamente definito nel DOM Level 0 e non fa parte di alcuno standard. Tuttavia, CSSOM include scrollToper compatibilità con le versioni precedenti.

— Clint Pachl,

3

Penso che scrollsia ampiamente supportato. Vedere stackoverflow.com/q/1925671/41906

— Clint Pachl

Grazie. Immagino window && window.scroll(0,0);sia accettabile nel mio modello di visualizzazione.

— nrodic

34

Se stai usando la finestra di dialogo dell'interfaccia utente di jQuery, potresti semplicemente modellare il modale in modo che appaia con la posizione fissata nella finestra in modo che non appaia fuori vista, annullando la necessità di scorrere. Altrimenti,

var scrollTop = function() {
    window.scrollTo(0, 0);
};

dovrebbe fare il trucco.

— Silkster
fonte

13

Potresti farlo senza javascript e utilizzare semplicemente i tag di ancoraggio? Quindi sarebbe accessibile a quelli gratuiti.

anche se mentre usi i modali, presumo che non ti interessi di essere js libero. ;)

— S.Kiers
fonte

1

L'uso di tag anchor interromperebbe la navigazione basata su hash.

— Tom Landau,

2

// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
        document.getElementById("myBtn").style.display = "block";
    } else {
        document.getElementById("myBtn").style.display = "none";
    }
   
}

// When the user clicks on the button, scroll to the top of the document
function topFunction() {
 
     $('html, body').animate({scrollTop:0}, 'slow');
}

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
}

#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#myBtn:hover {
  background-color: #555;
}

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>

<div style="background-color:black;color:white;padding:30px">Scroll Down</div>
<div style="background-color:lightgrey;padding:30px 30px 2500px">This example demonstrates how to create a "scroll to top" button that becomes visible when the user starts to scroll the page.</div>

Espandi frammento

— Waruna Manjula
fonte

2

So che questo è vecchio, ma per coloro che hanno problemi in Edge:

JS semplice: window.scrollTop=0;

Sfortunatamente, scroll()e scrollTo()genera errori in Edge.

— Josh Powlison
fonte

1

stai usando la finestra di dialogo dell'interfaccia utente di jQuery, potresti semplicemente modellare il modale in modo che appaia con la posizione fissata nella finestra in modo che non venga fuori vista, annullando la necessità di scorrere. Altro

— gary
fonte

0

Pura soluzione Javascript

theId.onclick = () => window.scrollTo(top: 0)

Se si desidera uno scorrimento uniforme

theId.onclick = () => window.scrollTo({ top: 0, behavior: `smooth` })

— Moghazi
fonte