JavaScript温故：制作一个backtotop按钮

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位置处。