JS asli melaksanakan pengembalian lancar ke kemahiran component_javascript teratas

Komponen Kembali ke Atas ialah fungsi halaman web yang sangat biasa dengan keperluan mudah: selepas halaman menatal jarak tertentu, butang Kembali ke Atas dipaparkan dengan mengklik butang ini boleh menatal bar skrol kembali ke permulaan muka surat.

Idea pelaksanaan juga sangat mudah, cuma tukar nilai document.documentElement.scrollTop atau document.body.scrollTop.

Artikel ini meninggalkan semua kesan hebat pecutan dan nyahpecutan, kembali kepada intipati perisian, dan menyediakan pelaksanaan yang paling mudah dan tidak mengejar apa yang dipanggil pengalaman pengguna >

Memandangkan idea dan kodnya sangat mudah, saya akan terus menyiarkan butiran pelaksanaan:

var BackTop = function (domE,distance) {
if (!domE) return;
var _onscroll = window.onscroll,
_onclick = domE.onclick;
window.onscroll = throttle(function(){
typeof _onscroll === 'function' && _onscroll.apply(this, arguments);
toggleDomE();
},100);
domE.onclick = function(){
typeof _onclick === 'function' && _onclick.apply(this, arguments);
document.documentElement.scrollTop = 0;
document.body.scrollTop = 0;
};
function toggleDomE(){
domE.style.display = (document.documentElement.scrollTop || document.body.scrollTop) > (distance || 500) ? 'block' : 'none';
}
function throttle(func, wait) {
var timer = null;
return function () {
var self = this, args = arguments;
if (timer) clearTimeout(timer);
timer = setTimeout(function () {
return typeof func === 'function' && func.apply(self, args);
}, wait);
}
}
}; 

Kaedah panggilan:

<script>
new BackTop(document.getElementById('backTop'))
</script> 

Sebab mengapa saya menulis blog ini dan membuat perkara yang begitu mudah adalah atas dua sebab:

1) Saya telah menulis beberapa komponen mudah biasa pada masa ini. Ini adalah yang lebih mudah daripada yang ringkas Untuk menjadikan siri blog ini lebih lengkap, saya menambah komponen ini

2) Saya ingin menyatakan salah satu pandangan saya dalam proses kerja: jangan gunakan pengalaman pengguna untuk menghiasi perisian atau produk anda secara terang-terangan, pengalaman pengguna boleh dibahagikan kepada dua perkataan, satu adalah kesan yang baik. dan satu lagi adalah kesan yang baik Ia hanya menyeronokkan, tetapi ini bukan matlamat utama pembangunan dan operasi produk Tidak kira betapa cantiknya anda membuat sesuatu, jika nilai teras dan perkhidmatan produk tidak mencukupi, walaupun anda membuat fungsi kembali ke atas ke dalam roket super kebal, ia akan menjadi sia-sia. Apabila melakukan pembangunan bahagian hadapan, anda perlu mengawal sejauh mana pengurus produk menyebut secara membuta tuli fungsi pengalaman pengguna Untuk komponen ini, saya fikir ia adalah berlebihan untuk melakukan kesan pecutan atau nyahpecutan Ia bukan sahaja meningkatkan masa pembangunan. tetapi juga melambatkan masa penggunaan pengguna, dan meninggalkan diri mereka sendiri Kedegilan dalam bermain dengan teknologi boleh menjadikan kerja anda lebih sempurna.

Izinkan saya berkongsi dengan anda beberapa halaman web biasa kembali ke kod teratas

1. Paling mudah untuk menggunakan tag sauh HTML Tetapi satu-satunya kelemahan ialah gayanya tidak begitu baik dan tag anchor ini akan dipaparkan.

Salin kod Kod adalah seperti berikut:

Anda boleh meletakkannya di mana-mana sahaja selepas teg asalkan dekat dengan bahagian atas.

Letak di bahagian bawah halaman:

Salin kod Kod adalah seperti berikut:

Kembali ke atas

2. Gunakan fungsi Tatal Javascript untuk kembali ke atas Fungsi skrol digunakan untuk mengawal kedudukan bar skrol Terdapat dua kaedah pelaksanaan yang sangat mudah:

Kaedah 1 (disyorkan: ringkas dan mudah):

Salin kod Kod adalah seperti berikut:

Kembali ke atas

Parameter pertama tatal ialah kedudukan mendatar, dan parameter kedua ialah kedudukan menegak Contohnya, jika anda ingin meletakkannya pada 50 piksel secara menegak, cuma tukar ia kepada tatal(0,50).

Kaedah 2 (fokus pada kesan: perlahan-lahan ke atas):

Kaedah ini adalah kembali secara beransur-ansur ke atas, yang sepatutnya kelihatan lebih baik

Ini akan kembali ke atas secara dinamik, tetapi walaupun ia kembali ke atas, kod itu masih berjalan dan anda perlu menambah ayat pada fungsi pageScroll untuk menghentikannya.

functionpageScroll() {window.scrollBy(0,-10);scrolldelay=setTimeout('pageScroll()',100);}<ahref="pageScroll();">返回顶部</a>

if(document.documentElement.scrollTop==0)clearTimeout(scrolldelay);

3 Gunakan fungsi Tatal Onload plus untuk kembali ke atas secara dinamik

Tambah dahulu: sebelum akhir teg badan halaman web

<divid="gotop">返回顶部</div>

2. Panggil bahagian skrip JS berikut:

Ini boleh diletakkan dalam halaman web, atau boleh disimpan secara berasingan sebagai fail js, seperti gotop.js, dan kemudian dalam bentuk berikut:

BackTop=function(btnId){varbtn=document.getElementById(btnId);vard=document.documentElement;window.onscroll=set;btn.onclick=function(){btn.style.display="none";window.onscroll=null;this.timer=setInterval(function(){d.scrollTop-=Math.ceil(d.scrollTop*0.1);if(d.scrollTop==0)clearInterval(btn.timer,window.onscroll=set);},10);};functionset(){btn.style.display=d.scrollTop?'block':"none"}};BackTop('gotop');

untuk memanggil Sudah tentu, lebih baik meletakkannya di bawah label "Kembali ke Atas" Kaedah panggilan ini menganggap bahawa laluan fail adalah JS Sila ubah suainya mengikut situasi sebenar apabila meletakkannya di lokasi lain.

<scriptsrc="/js/gotop.js"type=text/javascript></script>