JavaScript温故：制作一个backtotop按钮-优快云博客

本文介绍了一个简单的返回顶部按钮实现方案，通过HTML、CSS和JavaScript结合使用，使得网页滚动时按钮出现，并可在点击后快速返回页面顶部。

backtotop按钮可以在内容滚动时，给用户一个返回顶部的方便。制作一个backtotop按钮的关键是告诉浏览器此元素相对于浏览器固定，而不随着内容的滚动而滚动。代码：

    <div href="#" id="top" title="Back to top">&uarr;</div>
    <div id="content" style="height: 2000px;">Try Scroll Down</div>
    <script>
        var d = document.getElementById("top");
        var threshold = 100
        function toggle(){
          if (document.body.scrollTop > threshold)
            d.style.display = 'block'
          else
            d.style.display = 'none'
        }
        window.addEventListener('scroll', toggle);   
        d.addEventListener("click",function (e) {
            e.preventDefault();
            window.scrollTo(0, 0)
        })
    </script>
    <style>
      #top {
        position: fixed;
        bottom: 40px;
        right: 40px;
        font-size: 100px;
        z-index: 1;
        cursor: pointer;
        background: #e9ebec;
        display:none;
    }
    #top:hover {
        background: #e9eb00;
    }
    </style>

达到此效果的方式是使用css的特性

    position:fixed;

而属性组合：

    bottom: 40px;
    right: 40px;

告诉浏览器，固定此元素在相对于右下角的40px，40px位置处。