jQuery插件:返回顶部功能

HTML/CSS/JS 阅读: 1040

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

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>

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

jQuery

版权声明:本文为博主原创文章,转载需注明来自: 洛洛の空间