DOM实践1——回到页面顶部

为了搞清楚DOM和熟练HTML及CSS的操作,决定做三个小Demo练手,首先实现一个最简单的「回到顶部」的效果
需求:点击一个按钮回到页面最顶层

实现回到顶部效果

具体实现

首先布局,创建一个button,并命其Id为'backToTop'.同时设置这个按钮的CSS,让它始终显示在页面右下方

  #backToTop{
    position: fixed;
    bottom: 100px;
    right: 20px;
  }

通过getElementById()获得按钮组件,同时设置onclick事件，并测试button引用是否成功。倘若要实现需求,得使用window.scrollY属性，获得当前滚条已滚动过的页面高度（px），再通过setInterval()的方法，以一个类似于时间间隔的方式为返回顶部的动作加上动画效果。在此期间不断调用scrollBy()的方式，逐步接近页面顶部。

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
返回文档在垂直方向已滚动的像素值。
setInterval()
重复调用一个函数或执行一个代码段，以固定的时间延迟在每次调用之间。返回一个 intervalID。
**clearInterval() **
取消由 setInterval设置的 timeout。参数必须为setInterval() 返回的 ID 值。
window.scrollBy()
指定滚动的像素数

效果预览
https://tazbingor.github.io/small-front-end-project/test01-back-to-top/test.html