為了搞清楚DOM和熟練HTML及CSS的操作,決定做三個(gè)小Demo練手,首先實(shí)現(xiàn)一個(gè)最簡(jiǎn)單的「回到頂部」的效果
需求:點(diǎn)擊一個(gè)按鈕回到頁(yè)面最頂層
實(shí)現(xiàn)回到頂部效果
具體實(shí)現(xiàn)
首先布局,創(chuàng)建一個(gè)button,并命其Id為'backToTop'.同時(shí)設(shè)置這個(gè)按鈕的CSS,讓它始終顯示在頁(yè)面右下方
#backToTop{
position: fixed;
bottom: 100px;
right: 20px;
}
通過(guò)getElementById()獲得按鈕組件,同時(shí)設(shè)置onclick事件烧给，并測(cè)試button引用是否成功挟伙。倘若要實(shí)現(xiàn)需求,得使用window.scrollY屬性，獲得當(dāng)前滾條已滾動(dòng)過(guò)的頁(yè)面高度（px），再通過(guò)setInterval()的方法脆贵，以一個(gè)類似于時(shí)間間隔的方式為返回頂部的動(dòng)作加上動(dòng)畫(huà)效果。在此期間不斷調(diào)用scrollBy()的方式沼本，逐步接近頁(yè)面頂部敬察。
var button = document.getElementById('backToTop');
button.onclick = function () {
let height = window.scrollY;
let n = 1;
let id = setInterval(function () {
//console.log(n);
if (n === 20) {
clearInterval(id);
}
window.scrollBy(0, - height * n / 20);
n += 1;
}, 50);
}
涉及的屬性
window.scrollY
返回文檔在垂直方向已滾動(dòng)的像素值漠畜。
setInterval()
重復(fù)調(diào)用一個(gè)函數(shù)或執(zhí)行一個(gè)代碼段币他，以固定的時(shí)間延遲在每次調(diào)用之間。返回一個(gè) intervalID憔狞。
**clearInterval() **
取消由 setInterval設(shè)置的 timeout蝴悉。參數(shù)必須為setInterval() 返回的 ID 值。
window.scrollBy()
指定滾動(dòng)的像素?cái)?shù)
效果預(yù)覽
https://tazbingor.github.io/small-front-end-project/test01-back-to-top/test.html
