Cara melompat ke atas halaman browser


186

Saya sedang menulis popup modal dan saya perlu browser untuk melompat ke atas layar ketika tombol modal terbuka ditekan. Apakah ada cara untuk menggulir browser ke atas menggunakan jQuery?

Jawaban:


405

Anda dapat mengatur scrollTop, seperti ini:

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

Atau jika Anda ingin sedikit animasi alih-alih snap ke atas:

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

1
bagus ... Saya telah menggunakan plugin scrollTo untuk jQuery sebelum menyelesaikan ini - bisa saja menyimpan sedikit kode dengan kode Anda ... terima kasih untuk pelajarannya ;-)
Zathrus Writer

@MikhailBatcer - nonaktifkan CSS Anda dan lihat apakah itu berfungsi. Anda mungkin memiliki masalah dengan cara Anda mengatur tag htmldan gaya Anda body. kalau tidak gunakan $(window)saja.
invot

bagaimana cara menambahkan durasi untuk skrolling animasi?
Maxim Strutinskiy

139

Tanpa animasi, Anda dapat menggunakan JS biasa:

scroll(0,0)

Dengan animasi, periksa jawaban Nick .


4
Apakah ini didukung di semua browser?
Pacerier

1
scrollada dalam standar CSSOM sementara scrollToawalnya didefinisikan dalam DOM Level 0 dan bukan bagian dari standar apa pun. Namun, CSSOM termasuk scrollTountuk kompatibilitas ke belakang.
Clint Pachl

3
Saya pikir scrolldidukung secara luas. Lihat stackoverflow.com/q/1925671/41906
Clint Pachl

Terima kasih. Saya kira window && window.scroll(0,0);dapat diterima dalam model tampilan saya.
nrodic

34

Jika Anda menggunakan dialog jQuery UI, Anda bisa mendesain modal agar muncul dengan posisi tetap di jendela sehingga tidak muncul keluar dari pandangan, meniadakan kebutuhan untuk menggulir. Jika tidak,

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

harus melakukan trik.


13

Anda bisa melakukannya tanpa javascript dan cukup menggunakan jangkar tag? Maka itu akan dapat diakses oleh mereka js gratis.

meskipun saat Anda menggunakan modals, saya menganggap Anda tidak peduli tentang menjadi js gratis. ;)


1
Menggunakan tag jangkar akan mengganggu navigasi berbasis 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>


2

Saya tahu ini sudah tua, tetapi bagi mereka yang memiliki masalah di Edge:

JS Biasa: window.scrollTop=0;

Sayangnya, scroll()dan scrollTo()membuang kesalahan di Edge.


1

Anda menggunakan dialog UI jQuery, Anda bisa menata modal agar muncul dengan posisi tetap di jendela sehingga tidak muncul keluar dari pandangan, meniadakan kebutuhan untuk menggulir. Lain


0

Solusi Javascript murni

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

Jika Anda ingin menggulir dengan lancar

theId.onclick = () => window.scrollTo({ top: 0, behavior: `smooth` })
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.