Pertanyaan Gulir ke bagian atas halaman menggunakan JavaScript / jQuery?


Saya sudah a <button> di halaman, ketika tombol ini ditekan tersembunyi <div> ditampilkan menggunakan jQuery.

Bagaimana cara menggulir ke bagian atas halaman menggunakan perintah JavaScript / jQuery dalam fungsi itu? Sangat diharapkan bahkan jika scroll bar langsung melompat ke atas. Saya tidak mencari pengguliran yang mulus.


1271
2017-07-17 17:59


asal


Jawaban:


Jika Anda tidak perlu mengubah untuk bernyawa maka Anda tidak perlu menggunakan plugin khusus - Saya hanya menggunakan metode jendela native.scrollTo native - passing dalam 0,0 akan menggulir halaman ke kiri atas langsung .

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

Parameter

  • x-coord adalah pixel sepanjang sumbu horizontal.
  • y-coord adalah pixel sepanjang sumbu vertikal.

1741
2017-07-17 18:42



Jika Anda ingin menggulir mulus, cobalah sesuatu seperti ini:

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

Itu akan memakan waktu <a> tag siapa href="#top" dan membuatnya halus gulir ke atas.


1177
2017-07-17 19:43



Coba ini untuk menggulir ke atas

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

123
2018-05-21 07:45



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

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

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

82
2017-07-17 18:51



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

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

47
2018-04-23 09:53



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

29
2018-05-29 10:49



<script>

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

di html

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

25
2018-02-14 16:44



Jika Anda ingin melakukan scrolling halus, 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-nilai adalah piksel di sepanjang sumbu horizontal.
  • y-nilai adalah pixel sepanjang sumbu vertikal.

23
2017-09-11 10:37



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 berhasil
Saya menggunakan blueprint 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 sebuah div dialog yang menunjuk ke 2 bidang, setelah 3 detik memudar


21
2017-09-01 13:01



SEBUAH banyak  dari  pengguna merekomendasikan memilih tag html dan body untuk kompatibilitas lintas browser, seperti:

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

Ini dapat membuat Anda tersandung meskipun jika Anda mengandalkan panggilan balik Anda hanya sekali berjalan. 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 di Chrome $('html').scrollTop() mengembalikan 0, tetapi tidak di browser lain seperti Firefox.

Jika Anda tidak ingin menunggu animasi selesai dalam hal scrollbar sudah berada 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();
}

21
2017-10-31 18:56



Benar-benar aneh: Pertanyaan ini aktif selama lima tahun sekarang dan masih belum ada jawaban JavaScript vanili untuk menghidupkan pengguliran ... Jadi di sini Anda pergi:

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 Anda suka, Anda dapat membungkus ini dalam suatu fungsi dan memanggil itu melalui onclick atribut. Periksa ini jsfiddle

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


18
2017-10-02 10:00