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.

KingNestor
sumber
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.
daniellmb
sumber
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.

Mark Ursino
sumber
+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>
aku baik-baik saja
sumber
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

Ganesh Ghalame
sumber
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>
Mathew
sumber
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);
D. Alex
sumber
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));
    }
})();
bangun-neo
sumber
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' });
Kamlesh
sumber
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>
hasancse016
sumber
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

Av
sumber
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.
Gaurang Sondagar
sumber
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

Luiggi ZAMOL
sumber
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();
}
McLarge Besar
sumber
19

Yang lama #topbisa melakukan trik

document.location.href = "#top";

Bekerja dengan baik di FF, IE dan Chrome

pollirrata
sumber
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>

arvinda kumar
sumber
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>
Renjith
sumber
14

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

Hari Ganesan
sumber
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;
tfont
sumber
14

Ini akan berhasil:

window.scrollTo(0, 0);

Santosh Jadi
sumber
3
Ini adalah jawaban terbaik
OG Sean
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.

Wasif Ali
sumber
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;
    }
}
Saeed Hassanvand
sumber
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!

Sandeep Gantait
sumber
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.

Sriramajeyam Sugumaran
sumber
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>
Gayashan Perera
sumber
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.

Jon Story
sumber
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.

Gianluca Casati
sumber
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
5

Anda bisa menggunakan target dari tautan Anda, seperti #someid, di mana #someid adalah id div.

Atau, Anda dapat menggunakan sejumlah plugin gulir yang membuatnya lebih elegan.

http://plugins.jquery.com/project/ScrollTo adalah contohnya.

ScottE
sumber
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>
asertym
sumber
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;
    });
}
Mardzis
sumber
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;
jeancallisti
sumber