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.
javascript
scroll
KingNestor
sumber
sumber
Jawaban:
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 .
Parameter
sumber
window.scrollTo(0, document.body.scrollHeight);
Jika Anda ingin pengguliran yang mulus, coba sesuatu seperti ini:
Itu akan mengambil setiap
<a>
tag yang memilikihref="#top"
dan membuatnya menjadi gulir halus ke atas.sumber
window.pageYOffset
akan menjadi milik objek jendela e̶l̶e̶m̶e̶n̶t̶.Coba ini untuk menggulir di atas
sumber
Solusi yang lebih baik dengan animasi yang halus:
Referensi: https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo#Example
sumber
ScrollOptions
(untuk peramban tertentu): github.com/iamdustan/smoothscrollAnda tidak perlu jQuery untuk melakukan ini. Tag HTML standar akan cukup ...
sumber
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.
sumber
gulir halus, javascript murni:
sumber
Edit:
Cara lain gulir dengan margin atas dan kiri:
sumber
animate
fungsi, Anda harus menggunakan:$('html, body').animate({scrollTop:(scroll_pos)}, 2000);
dalam html
sumber
Sungguh aneh: Pertanyaan ini aktif selama lima tahun sekarang dan masih belum ada jawaban vanilla JavaScript untuk menghidupkan gulir ... Jadi begini:
Jika suka, Anda dapat membungkus ini dalam suatu fungsi dan menyebutnya melalui
onclick
atribut. Periksa jsfiddle iniCatatan: 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
sumber
Jika Anda ingin melakukan scrolling dengan lancar, silakan coba ini:
Solusi lain adalah metode JavaScript window.scrollTo:
Parameter:
sumber
Dengan
window.scrollTo(0, 0);
sangat cepatjadi saya mencoba contoh Mark Ursino, tetapi di Chrome tidak ada yang terjadi
dan saya menemukan ini
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
sumber
Sebuah banyak dari pengguna sarankan memilih kedua html dan tubuh tag untuk kompatibilitas cross-browser, seperti:
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:
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:
sumber
Yang lama
#top
bisa melakukan trikBekerja dengan baik di FF, IE dan Chrome
sumber
sumber
Coba ini
sumber
$(document).scrollTop(0);
juga berfungsi.sumber
Solusi non-jQuery / JavaScript murni:
sumber
Ini akan berhasil:
window.scrollTo(0, 0);
sumber
Coba kode ini:
div => Dom Elemen tempat Anda ingin menggulir gulir.
waktu => milidetik, tentukan kecepatan gulir.
sumber
Solusi JavaScript murni:
Saya menulis solusi animasi di Codepen
Anda juga dapat mencoba solusi lain dengan
scroll-behavior: smooth
properti CSS .sumber
Mengapa Anda tidak menggunakan fungsi inbuilt JQuery scrollTop:
Singkat dan sederhana!
sumber
Anda tidak perlu JQuery. Cukup Anda bisa memanggil skrip
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.
sumber
Cukup gunakan skrip ini untuk menggulir ke atas langsung.
sumber
Jika Anda tidak ingin pengguliran yang lancar, Anda dapat menipu dan menghentikan animasi penggulungan yang mulus segera setelah Anda memulainya ... seperti:
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.
sumber
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.
Kemudian sebagai tombol Anda dapat menggunakan tautan, cukup edit atribut onclick dengan kode seperti ini.
Di mana argumen
document.getElementById
adalah id dari tag yang ingin Anda gulir setelah klik.sumber
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.
sumber
Anda dapat mencoba menggunakan JS seperti pada Fiddle ini http://jsfiddle.net/5bNmH/1/
Tambahkan tombol "Pergi ke atas" di footer halaman Anda:
sumber
sumber
Tak satu pun dari jawaban di atas akan berfungsi di SharePoint 2016.
Itu harus dilakukan seperti ini: /sharepoint/195870/
sumber