返回顶部的功能相信很多人都不陌生，那么是到底它的原理是什么呢？是怎么实现的呢？
答案就在下面的代码中：

jquery-backtop.js

/**
 * jQuery插件：返回顶部
 * @author luoluolzb
 * @time   2018/5/26
 */
(function(){
    var jq = jQuery.noConflict();
    var distance = window.screen.availHeight ? window.screen.availHeight / 3 : 300;
    var $backtop = jq('#jquery-backtop');

    $backtop.click(function(e){
        e.preventDefault();
        jq('html,body').animate({scrollTop: 0}, 350);
    });

    var UpdatePos = function(){
        if (jq(document).scrollTop() > distance) {
            $backtop.show();
        } else {
            $backtop.hide();
        }
    };

    jq(document).scroll(UpdatePos);
    jq(UpdatePos);
})();

使用方法

1. 先加载 jQuey 库，版本为1.7以上
2. 加载 jquery-backtop.js
3. 对要实现的元素（如按钮）指定id为jquery-backTop
   例子：

   <a href="#" id="jquery-backtop"/>返回顶部</a>
   

也许你也发现了，本站的返回顶部功能就是这么实现的 ^_^