jQuery插件:返回顶部功能

Web前端 luoluolzb 浏览1235次

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

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

本文标签: JavaScript jQuery

版权声明:本文为作者原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.luoluolzb.cn/articles/46/jquery-cha-jian-fan-hui-ding-bu-gong-neng
您需要登录后才发布评论。 点此登录
用户评论 (0条)

暂无评论,赶紧发表一下你的看法吧。