【小河今学 | JavaScript】原生JS返回顶部效果

8.05作业要求如下
使用原生JS来达到返回顶部的效果。
首先构建html布局，这里我用box包裹几张图片，达到出现滚动条的效果。（这里也可以给box一个height来撑开）然后给一个“回到顶部”的按钮。

	<div class="box">
        <img src="/images/0.jpg" alt="">
        <img src="/images/1.jpg" alt="">
        <img src="/images/2.jpg" alt="">
        <img src="/images/3.jpg" alt="">
        <img src="/images/4.jpg" alt="">
        <img src="/images/5.jpg" alt="">
        <img src="/images/6.jpg" alt="">
        <img src="/images/0.jpg" alt="">
        <img src="/images/1.jpg" alt="">
        <img src="/images/2.jpg" alt="">
        <img src="/images/3.jpg" alt="">
        <img src="/images/4.jpg" alt="">
        <img src="/images/5.jpg" alt="">
        <img src="/images/6.jpg" alt="">
    </div>
    <a href="javascript:void(0);" id="btn"></a>

接着是CSS部分，这里主要是让按钮能够一直固定在右下角。

		* {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 790px;
            margin: 0 auto;
        }

        #btn {
            width: 99px;
            height: 175px;
            display: none;
            background-image: url(/images/huojian1.jpg);
            position: fixed;
            right: 100px;
            bottom: 10px;
        }

最后是JS部分，具体注释里都有写，这里主要遇到的问题是定时器和清理定时器问题。

1. 定时器：主体写完之后为了给他一个渐渐回到顶部的动画效果我用到setInterval定时调用函数，让他能够50毫秒实现一次上移。每次上移的高度为Math.floor(-scrollHeight / 6)，从而实现缓缓上移。同时设置定时器var timer = null;是为了清理全局垃圾，让上移效果实现后手动将定时器清除。
2. 清理器：写完上移效果后我发现，回到顶部后就没有办法再次滚动页面下移，原因是因为Math.floor(-scrollHeight / 6)一直在进行，因此你往下滚动它就会缓缓上移。为此我设置一个var isTop = true;作为定时器的清理器。
   首先在滚动条回滚的过程中，查看isTop是否为false（即是否到达顶部），如果为false（即没有到达顶部），则执行clearInterval(timer);清理定时器，达到停下的作用，注意这里要将isTop设置为false，即当我在滚动条回滚时，手动滚动滚动条，isTop就为false。
   接着在达到顶部后，设置isTop为true，并且判断滚动条距离页面顶端高度是否为0，如果为0（也就是到达了顶部），那么执行clearInterval(timer);
   清理定时器。

	// 获取可视窗口的高度
    var viewHeight = document.documentElement.clientHeight;
    // 获取btn
    var toTop = document.getElementById('btn');
    // 定义定时器
    var timer = null;
    // 定义定时器清除器,true为到达顶部，false为未到达顶部。
    var isTop = true;
    window.onscroll = function() {
		//获取滚动条到顶部的垂直高度
		var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop;
        // 当滚动条高度大于可视窗口高度时，显示“回到顶部”标志
        if(scrollHeight >= viewHeight){
            toTop.style.display = 'block';
        }else{
            toTop.style.display = 'none';
        }
        //判断当点击回到顶部按钮后滚动条在回滚过程中，若手动滚动滚动条，则清除定时器
        if(!isTop){
            toTop.style.backgroundImage = "url(images/huojian1.jpg)";
            clearInterval(timer);
        }
        isTop = false;
    }
    // 点击按钮后图标改变，并且回到最上边
    toTop.onclick = function() {
        
        // 设置缓缓回到顶部效果
        timer = setInterval(() => {
            //获取滚动条到顶部的垂直高度
            var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop;
            toTop.style.backgroundImage = 'url("/images/huojian2.jpg")';
            var speed = Math.floor(-scrollHeight / 6);
            document.documentElement.scrollTop = scrollHeight + speed;
            isTop = true;
            if(scrollHeight == 0){
                toTop.style.backgroundImage = "url(images/huojian1.jpg)";
                clearInterval(timer);
            }
        }, 50);
    }