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?

javascript jquery css modal-dialog Exitos
sumber

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');
Nick Craver
sumber
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 .

Ionuț Staicu
sumber
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.

Silkster
sumber
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. ;)

S.Kiers
sumber
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>
Luaskan cuplikan

Waruna Manjula
sumber
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.

Josh Powlison
sumber
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

gary
sumber
0

Solusi Javascript murni

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

Jika Anda ingin menggulir dengan lancar 

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