Gulir ke bagian atas halaman menggunakan JavaScript?


1594

Bagaimana cara saya menggulir ke bagian atas halaman menggunakan JavaScript? Ini diinginkan bahkan jika scrollbar langsung melompat ke atas. Saya tidak mencari pengguliran yang mulus.


2019, untuk menghindari “Situs ini tampaknya menggunakan efek pemosisian terkait-gulir. Ini mungkin tidak bekerja dengan baik dengan panning asinkron ”gunakan skrip saya stackoverflow.com/a/57641938/5781320
Constantin

Jawaban:


2173

Jika Anda tidak memerlukan perubahan untuk menghidupkan maka Anda tidak perlu menggunakan plugin khusus - Saya hanya akan menggunakan jendela JavaScript asli. Metode gulung Untuk - melewatinya 0,0 akan menggulir halaman ke kiri atas secara instan .

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

Parameter

  • x-coord adalah piksel di sepanjang sumbu horizontal.
  • y-coord adalah piksel di sepanjang sumbu vertikal.

176
Itu maksud saya, jika Anda tidak perlu menghidupkan scrolling lancar maka Anda tidak perlu menggunakan jQuery.
daniellmb

23
Lucu seperti komentar jeff jujur ​​bagi orang-orang yang hanya ingin semuanya berjalan lintas browser 95% dari waktu hanya harus menggunakan jQuery. Ini berasal dari seseorang yang harus menulis banyak javascript murni sekarang karena kita tidak mampu membeli overhead perpustakaan yang memperlambat kode iklan :(
Will

11
Jawaban ini tidak ada hubungannya dengan pertanyaan. Akan baik-baik saja jika pertanyaannya adalah: Skrip dan metode apa yang harus saya gunakan untuk menggulir ke bagian atas halaman? Jawaban yang benar ada di sini: stackoverflow.com/questions/4147112/…
skobaljic

2
Bekerja untuk saya di Firefox 40 dan Chrome 44 (untuk membahas komentar Mikhail)
tony

10
Gulir ke bagian bawah halamanwindow.scrollTo(0, document.body.scrollHeight);
emix

1346

Jika Anda ingin pengguliran yang mulus, coba sesuatu seperti ini:

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

Itu akan mengambil setiap <a>tag yang memiliki href="#top"dan membuatnya menjadi gulir halus ke atas.


+1. Saya hanya ingin tahu bagaimana melakukan sesuatu seperti ini dan google membawa saya ke sini. PERTANYAAN, di manakah fungsi "scrollTop" dalam dokumen? Saya hanya melihat tetapi tidak dapat menemukannya.
sqram

22
scrollTop tidak berfungsi, itu adalah properti elemen jendela
Jalal El-Shaer

1
Ini tidak berfungsi dengan benar saat menggunakan panggilan balik lengkap animate, karena akan menjalankannya dua kali.
David Morales

5
"html" dan "body" keduanya diperlukan untuk kompatibilitas browser, yaitu Chrome v27 menggulir hanya dengan "body" dan IE8 tidak. IE8 bergulir hanya dengan "html" tetapi Chrome v27 tidak.
SushiGuy

1
@jalchr Sebenarnya, window.pageYOffsetakan menjadi milik objek jendela e̶l̶e̶m̶e̶n̶t̶.
Alex W

176

Coba ini untuk menggulir di atas

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

ini sama: if ('scrollRestoration' in history) {history.scrollRestoration = 'manual'; }
Vasilii Suricov

123

Solusi yang lebih baik dengan animasi yang halus:

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

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


Anda mungkin masih perlu mengisi dukungan polyfill untuk ScrollOptions(untuk peramban tertentu): github.com/iamdustan/smoothscroll
jneuendorf

Saya suka solusi ini.
SuperManEver

Dapatkah seseorang menguji ini di Safari atau Internet Explorer dan melihat apakah itu berfungsi dengan baik? Terima kasih
Fabio Magarelli

1
@FabioMagarelli Ini berfungsi dengan baik di Safari, tidak diuji pada IE. FYI untuk mengujinya di safari, buka halaman apa pun yang memiliki gulir dan salin tempel kode di atas di Alat Pengembang -> Konsol, itu akan gulir ke atas diverifikasi (Safari Versi 13.0.5).
Ganesh Ghalame

104

Anda tidak perlu jQuery untuk melakukan ini. Tag HTML standar akan cukup ...

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

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

12
+1 Ini bagus jika Anda perlu menavigasi ke elemen tertentu, bukan hanya ke atas.
Ish

38
Gunakan '<a href="#"> Atas </a>' untuk melompat ke bagian atas halaman.
Bakanekobrain

3
Ini tampaknya menjadi cara terbaik untuk pergi ketika berurusan dengan SPA
Phil

Bagus! Apakah ada cara untuk membuatnya gulir halus?
stallingOne

65

Semua saran ini bekerja dengan baik untuk berbagai situasi. Bagi mereka yang menemukan halaman ini melalui pencarian, kita juga bisa memberikan ini mencoba. JQuery, tanpa plug-in, gulir ke elemen.

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

47

gulir halus, javascript murni:

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

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

Edit:

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

Cara lain gulir dengan margin atas dan kiri:

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

4
Apakah Anda yakin durasi sebagai string dalam fungsi animasi berfungsi?
yogesh

Anda tidak dapat menggunakan string untuk durasi dalam animatefungsi, Anda harus menggunakan: $('html, body').animate({scrollTop:(scroll_pos)}, 2000);
Kenny Alvizuris

1
Apa gunanya membungkus 0 dalam tanda kurung? ((0)) hanya akan mengevaluasi ke 0.
Jack Vial

Ya @ Jack, kamu bisa.
Kamlesh

29
<script>

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

dalam html

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

28

Sungguh aneh: Pertanyaan ini aktif selama lima tahun sekarang dan masih belum ada jawaban vanilla JavaScript untuk menghidupkan gulir ... Jadi begini:

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)

Jika suka, Anda dapat membungkus ini dalam suatu fungsi dan menyebutnya melalui onclickatribut. Periksa jsfiddle ini

Catatan: Ini adalah solusi yang sangat mendasar dan mungkin bukan yang paling performan. Contoh yang sangat terperinci dapat ditemukan di sini: https://github.com/cferdinandi/smooth-scroll


6
Pertanyaannya secara eksplisit meminta solusi jQuery. sangat tidak aneh
Will

2
Solusi terbaik untuk saya. Tidak ada plugin, tidak ada perpustakaan jquery besar hanya javascript sederhana. Kudos
user2840467

Man, saya juga membuat logika XD yang sama ini setelah 5 tahun, logika yang persis sama, hanya nilainya yang berbeda seperti, interval waktu dan integer yang kami gunakan untuk mengurangi, tidak percaya XD. TBH, datang ke sini untuk menjawab tetapi sudah ada di sana sehingga jawaban Anda tervotifikasi.
Germa Vinsmoke

27

Jika Anda ingin melakukan scrolling dengan lancar, silakan coba ini:

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

Solusi lain adalah metode JavaScript window.scrollTo:

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

Parameter:

  • x-value adalah pixel di sepanjang sumbu horizontal.
  • nilai-y adalah piksel di sepanjang sumbu vertikal.

7
copycat ... lihat jawaban pengguna ... Ini hanya kompilasi dari 2 jawaban teratas ....
Laurent B

itu adalah cara yang sah untuk menggunakan stackoverflow - lebih praktis untuk memilikinya di satu tempat. Joel Spolsky menggunakan kembali penggunaan jawaban yang ada sebagai contoh bagaimana stackoverflow seharusnya bekerja pada satu titik. Jika Anda tertarik, saya dapat mencoba dan menemukan posting blog
Edgar H

26

Dengan window.scrollTo(0, 0);sangat cepat
jadi saya mencoba contoh Mark Ursino, tetapi di Chrome tidak ada yang terjadi
dan saya menemukan ini

$('.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);
    });
});

menguji semua 3 browser dan berfungsi
saya menggunakan cetak biru css
ini adalah ketika klien mengklik tombol "Pesan sekarang" dan tidak memiliki periode sewa yang dipilih, perlahan-lahan pindah ke atas di mana kalender berada dan membuka kotak dialog yang menunjuk ke 2 bidang, setelah 3 detik memudar


Terima kasih telah menunjukkan Anda harus menargetkan html dan tubuh. Saya hanya melakukannya untuk html dan bertanya-tanya mengapa itu tidak berhasil di Chrome.
Jared

Animasi tubuh tidak berfungsi di Safari, jadi saya memperbarui jawaban Anda sesuai.
Dave DuPlantis

46
"Diuji semua 3 browser "? Midori, LuaKit dan Konqueror, kan? : p
Anko

14
Mengapa tidak melakukan $ ('html', 'body'). Animate ({scrollTop: 0}) alih-alih menambahkan dua baris?
Matt Smith

23

Sebuah banyak dari pengguna sarankan memilih kedua html dan tubuh tag untuk kompatibilitas cross-browser, seperti:

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

Ini dapat membuat Anda tersandung jika Anda mengandalkan panggilan balik Anda hanya berjalan sekali. Ini sebenarnya akan berjalan dua kali karena Anda telah memilih dua elemen.

Jika itu masalah bagi Anda, Anda dapat melakukan sesuatu seperti ini:

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

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

Alasan ini berfungsi adalah di Chrome $('html').scrollTop()mengembalikan 0, tetapi tidak di browser lain seperti Firefox.

Jika Anda tidak ingin menunggu sampai animasi selesai jika scrollbar sudah ada di atas, coba ini:

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

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

    callback();
}

19

Yang lama #topbisa melakukan trik

document.location.href = "#top";

Bekerja dengan baik di FF, IE dan Chrome


Bagus! Apakah ada cara untuk membuatnya gulir halus?
stallingOne

Anda harus menghindari solusi berbasis navigasi, lihat komentar pada jawaban Sriramajeyam.
Andrew Grothe

15

$(".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>


3
Sementara kode ini dapat menjawab pertanyaan, memberikan informasi tentang bagaimana dan mengapa itu memecahkan masalah meningkatkan nilai jangka panjangnya
L_J

Jelaskan jawabanmu!
Ullas Hunka

Di halaman web setiap pengguna akan mengklik tombol gulir atas kemudian halaman akan gulir atas dengan animasi.
arvinda kumar

Mengapa menghidupkan () alih-alih gulir jquery ()?
Akin Hwan

14

Coba ini

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

14

$(document).scrollTop(0); juga berfungsi.


2
Perhatikan bahwa ketika Anda tidak menggunakan Firefox, ini tidak akan berfungsi. Anda mendapatkan kesalahan saat hanya memberikan satu argumen (Kesalahan: Tidak cukup argumen [nsIDOMWindow.scrollTo]).
Husky

14

Solusi non-jQuery / JavaScript murni:

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


10

Coba kode ini:

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

div => Dom Elemen tempat Anda ingin menggulir gulir.

waktu => milidetik, tentukan kecepatan gulir.


9

Solusi JavaScript murni:

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

Saya menulis solusi animasi di Codepen

Anda juga dapat mencoba solusi lain dengan scroll-behavior: smoothproperti CSS .

html {
    scroll-behavior: smooth;
}

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

8

Mengapa Anda tidak menggunakan fungsi inbuilt JQuery scrollTop:

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

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

Singkat dan sederhana!


Anda baru saja kehilangan tautan ke dokumen
Cyril Duchon-Doris

8

Anda tidak perlu JQuery. Cukup Anda bisa memanggil skrip

window.location = '#'

pada klik tombol "Pergi ke atas"

Contoh demo:

output.jsbin.com/fakumo#

PS: Jangan gunakan pendekatan ini, ketika Anda menggunakan perpustakaan modern seperti angularjs. Itu mungkin merusak hashbang URL.


9
Sayangnya, ini bukan solusi terbaik karena Anda mengubah lokasi secara fisik dalam kasus itu daripada menggulir halaman. Itu dapat menyebabkan masalah jika lokasi penting (jika menggunakan perutean sudut atau lebih)
Yaroslav Rogoza

2
@YaroslavRogoza benar. Meskipun mungkin berfungsi dalam kasus-kasus sederhana, saya tidak akan merekomendasikan solusi ini. Lokasi menjadi semakin penting dan aplikasi satu halaman secara ekstensif menggunakan hash untuk menangani navigasi. Anda akan segera memperkenalkan bug efek samping ketika menambahkan navigasi berbasis hash setelah ini atau ini ke navigasi berbasis hash.
Andrew Grothe

8

Cukup gunakan skrip ini untuk menggulir ke atas langsung.

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

7

Jika Anda tidak ingin pengguliran yang lancar, Anda dapat menipu dan menghentikan animasi penggulungan yang mulus segera setelah Anda memulainya ... seperti:

   $(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;                              
      });
  });

Saya tidak tahu apakah itu direkomendasikan / diizinkan, tetapi berhasil :)

Kapan Anda akan menggunakan ini? Saya tidak yakin, tapi mungkin ketika Anda ingin menggunakan satu klik untuk menghidupkan satu hal dengan Jquery, tetapi melakukan yang lain tanpa animasi? yaitu membuka panel masuk admin slide-in di bagian atas halaman, dan langsung melompat ke atas untuk melihatnya.


6

Motivasi

Solusi sederhana ini bekerja secara asli dan menerapkan gulir halus ke posisi apa pun.

Ini menghindari penggunaan tautan jangkar (yang dengan #) yang menurut saya berguna jika Anda ingin menautkan ke bagian, tetapi tidak begitu nyaman dalam beberapa situasi, khususnya ketika menunjuk ke atas yang dapat menyebabkan dua URL berbeda yang menunjuk ke lokasi yang sama ( http://www.example.org dan http://www.example.org/# ).

Larutan

Masukkan id ke tag yang ingin Anda gulir, misalnya bagian pertama Anda , yang menjawab pertanyaan ini, tetapi id dapat ditempatkan di mana-mana di halaman.

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

Kemudian sebagai tombol Anda dapat menggunakan tautan, cukup edit atribut onclick dengan kode seperti ini.

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

Di mana argumen document.getElementByIdadalah id dari tag yang ingin Anda gulir setelah klik.


Terimakasih! adalah solusi hebat
Hugo Stiven Laguna Rueda

@HugoStivenLagunaRueda, selamat datang, saya menemukannya di MDN, jadi terima kasih kepada Mozilla. Sungguh menakjubkan betapa banyak hal sudah ada di sana, didukung secara asli. Saya suka vanilla JS.
Gianluca Casati


4

Anda dapat mencoba menggunakan JS seperti pada Fiddle ini http://jsfiddle.net/5bNmH/1/

Tambahkan tombol "Pergi ke atas" di footer halaman Anda:

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

4
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

Tak satu pun dari jawaban di atas akan berfungsi di SharePoint 2016.

Itu harus dilakukan seperti ini: /sharepoint/195870/

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