原生JS之回到顶部

---

前言

笔者原来是写vue.js，最近一个项目是用原生方法来写JS代码。今天用原生 JS代码写了一个回到顶部，所以将其记录下来，方便给其他读者提供参考。

---

具体代码如下

1.HTML代码

// 可将TOP换成图片
<a class="to-top" href="javascript:;" id="toTop">TOP</a>

2.CSS

.to-top {
    position: fixed;
    right: 0;
    bottom: 20px;
    width: 40px;
    height: 40px;
    z-index: 999; 
}

3.JS代码

<script>
    window.onload = function() {
        // 获取回到顶部按钮的ID
        var obtn = document.getElementById('toTop');  
        // 获取可视区域的高度
        var clientHeight = document.documentElement.clientHeight;   
        // 定义一个定时器
        var timer = null; 
        // 定义一个布尔值，用于判断是否到达顶部
        var isTop = true; 
    
        // 滚动条滚动事件
        window.onscroll = function() {         
            // 获取滚动条的滚动高度
            var osTop = document.documentElement.scrollTop || document.body.scrollTop; 
    
            // 如果滚动高度大于可视区域高度，则显示回到顶部按钮
            if(osTop >= clientHeight) {  
                obtn.style.display = 'block';
            }else{         
                // 否则隐藏
                obtn.style.display = 'none';
            }
    
            // 主要用于判断当 点击回到顶部按钮后 滚动条在回滚过程中，若手动滚动滚动条，则清除定时器
            if(!isTop) {
                clearInterval(timer);
            }
            isTop = false;
        }
    
        // 回到顶部按钮点击事件
        obtn.onclick = function() {    
            // 设置一个定时器
            timer = setInterval(function() {
                // 获取滚动条的滚动高度
                var osTop = document.documentElement.scrollTop || document.body.scrollTop;
                // 用于设置速度差，产生缓动的效果
                var speed = Math.floor(-osTop / 6);
                document.documentElement.scrollTop = document.body.scrollTop = osTop + speed;
                // 用于阻止滚动事件清除定时器
                isTop = true;  
                if(osTop == 0) {
                    clearInterval(timer);
                }
            },30);
        } 
    }
</script>

---

总结

本文设置了速度差，使点击返回顶部时产生缓动的效果，这样相较于点击按钮后直接返回顶部的操作没有这么粗鲁。