代码改变世界

Jquery回到顶部功能

  龙恩0707  阅读(587)  评论(0)  编辑  收藏  举报

    问题描述： 

       在网页中，我们经常会由于网页内容过长，而需要在浏览网页时有一个快速回到网页顶部的功能，在浏览网页内容离顶部有一段距离时，出现快速回到网页顶部的工具，从而能使我们的网页更人性化。

   问题的产生：

       前几天由于在公司做了个小项目中正好有一个这样的功能，当时也是以前同事用kissy框架写的组件，感觉蛮好用的，所以想能不能用Jquery把他们封装起来 这样以后如果离开了阿里系，那么就不可能用kissy框架 肯定大部分是用jquery框架了 ，所以.......  但是在这个代码之前在谷歌游览器下有个小小的bug。我想知道滚动top时候 用document.documentElement.scrollTop; 既然计算不到准确的值，经过仔细分析，发现Chrome对document.documentElement.scrollTop的识别会出现误差。不过加上document.body.scrollTop后，则显示正常。由于document.documentElement.scrollTop和document.body.scrollTop在标准模式或者是奇怪模式下都只有一个会返回有效的值，所以都加上也不会有问题（看来上面的问题是Chrome可能把文档当作非标准文档来解析了）。

代码如下 由于有详细的注释 所以可以直接看注释。

    /**
 * Setting:
 * !!! css中需设置{width:**;bottom:**;}，否则后果自负，哈哈
 *
 * 默认参数：
        topLink:'.top', //toplink
        markupType: 0, //默认为0：居中，1：居左，2：居右
        contentWidth: 1000, //布局宽度
        paddingWidth: 5, //仅当居右(左)时生效，表示距布局右(左)侧的间隔;
        leftOffset: 0, //仅当居中时生效，divbar左侧 需要超出布局的宽度
        //left和right 仅在markupType为-1 和 -2时有用。表示距窗口最左和最右的间隔
        left:0,
        right:0,
        //！！！top和bottom 必须设置其一 默认为top:0,顶对齐。
        YAlign: {
            top:0
        },
        zIndex:99999,//z-index属性
        display: 0//默认首屏不显示，为1则首屏显示。


        //水平居中，顶部(间隔用YAlign: {top:0}设置,默认为0)
        new ActiveTool('#divbar',{
            topLink:'.top',//class or id
            markupType: 0
        });
        //水平居中，底部(间隔用YAlign: {bottom:'10px'}设置)
        new ActiveTool('#divbar',{
            topLink:'.top',//class or id
            markupType: 0,
            YAlign: {
                bottom:0
            }
        });
        //水平居左靠近主体左侧，顶部(间隔用YAlign: {top:0}设置)
        new ActiveTool('#divbar',{
            topLink:'.top',//class or id
            markupType: 1
        });
        //水平居左靠近主体左侧，底部(间隔用YAlign: {bottom:'10px'}设置)
        new ActiveTool('#divbar',{
            topLink:'.top',//class or id
            markupType: 1,
            YAlign: {
                bottom:0
            }
        });
        //水平居左，顶部(间隔用YAlign: {top:0}设置),左侧距离用style
        new ActiveTool('#divbar',{
            topLink:'.top',//class or id
            markupType: -1,
            left:'5px'
        });
        //水平居左，底部(间隔用YAlign: {bottom:'10px'}设置),左侧距离用left
        new ActiveTool('#divbar',{
            topLink:'.top',//class or id
            markupType: -1,
            left:'5px',
            YAlign: {
                bottom:0
            }
        });

    ****水平居右与水平居左类似****

 * @change log:
 * 2013-8-20 tugenhua@126.com
 *
 */
var ActiveTool = (function(win,undefined){
    var doc = document,
        docBody = doc.body,
        isIE = navigator.userAgent.match(/MSIE/)!= null,
        isIE6 = navigator.userAgent.match(/MSIE 6.0/)!= null,
        docelem = doc.documentElement || docBody;

    function ActiveTool(container,config){
        var self = this;
        if(!(self instanceof ActiveTool)){
            return new ActiveTool(container,config);
        }
        config = .extend(ActiveTool.Config,config);self.config=config||;//匹配传参containerif(.isPlainObject(container)){
            self.container = container;
        }else if(/^\./.test(container)){
            self.container = (container);         }else if(/^#/.test(container)){             self.container = $(container);         }else if(('.'+container)){
            self.container = $('.'+container);
        }else{
            throw new Error('点击元素传递参数不符合!');
        }
        self._init();
    }
    
    // 默认配置

    ActiveTool.Config = {
        topLink: '.top',
        markupType: 0,
        contentWidth: 1000,
        paddingWidth: 5,
        leftOffset: 0,
        left:0,
        right:0,
        YAlign: {
            top:0
        },
        zIndex:99999,
        display: 0    
    };
    ActiveTool.prototype = {
        _init: function(){
            var self = this,
                cfg = self.config,
                EVT_SCROLL = 'scroll',
                EVT_RESIZE = 'resize',
                divBar;
            // init divBar node
            divBar = self.container;
            
            // init position
            self._calcPos();

            // 首屏是否显示
            if(cfg.display === 0){
                (divBar).css("opacity":0)(divBar).css('zIndex',-1);
            }else{
                (divBar).css("opacity":1);(divBar).css('zIndex',cfg.zIndex);

            }

            var topLink = (cfg.topLink,divBar);if(topLink)//hidefocusforieif(isIE)topLink.hideFocus=true;$(topLink).bind(′click′,function(e)e.preventDefault();$(topLink).unbind(′click′);docelem.scrollTop=0;);//dodecorationonscrolling(win).bind(EVT_SCROLL,function(e){
                self._decorate(true);
            });

            $(win).bind(EVT_RESIZE,function(e){
                self._decorate(false);
            });
        },
        //计算各浏览下的定位坐标
        _calcPos: function(){
            var self = this,
                cfg = self.config,
                PX = 'px',
                TOP = 'top',
                BOTTOM = 'bottom',
                LEFT = 'left',
                RIGHT = 'right',
                contentWidth = cfg.contentWidth,
                paddingWidth = cfg.paddingWidth,
                leftOffset = cfg.leftOffset,
                divBar = self.container,
                top = cfg.YAlign.top,
                bottomPadding = parseInt(cfg.YAlign.bottom,10),
                topPadding = parseInt(top,10),
                selfHeight = parseInt((divBar).css(′height′),10),//divbar自身高度selfWidth=parseInt((divBar).css('width'),10),//divbar自身宽度
                xPos,
                checkMarkup = function(viewWidth){
                    switch (true){

                        case cfg.markupType === 0:
                            xPos = Math.floor((viewWidth - contentWidth) / 2) - leftOffset;
                            break;

                        case cfg.markupType === 2:
                            xPos = Math.floor((viewWidth - contentWidth) / 2) + contentWidth + paddingWidth;
                            break;

                        case cfg.markupType === -2:
                            xPos = parseInt(cfg.right,10);
                            $(divBar).css(RIGHT, xPos + PX);
                            break;

                        case cfg.markupType === 1:
                            xPos = Math.floor((viewWidth - contentWidth) / 2) - paddingWidth - selfWidth;
                            break;

                        case cfg.markupType === -1:
                            xPos = parseInt(cfg.left,10);
                            break;

                        default:
                            xPos = Math.floor((viewWidth - contentWidth) / 2) - leftOffset;
                    }
                },
                cal;
            if (true === isIE6) {
                // for IE6
                cal = function(scrolling){
                    var viewHeight = (win).height(),scrollTop=docelem.scrollTop,yPos;if(top!==undefined)yPos=topPadding+scrollTop;elseyPos=viewHeight−bottomPadding−selfHeight+scrollTop;//onscrollingif(scrolling)DOM.css(divBar,TOP,yPos+PX);return;varviewWidth=(win).width();
                    checkMarkup(viewWidth);
                    (divBar).css(′position′:′absolute′);(divBar).css(TOP, yPos + PX);
                    if (cfg.markupType === -2){return;}
                    $(divBar).css(LEFT, xPos + PX);
                };
            } else if (isIE) {
                // for IE7+ （ie9有待验证）
                cal = function () {
                    (divBar).css(′position′:′fixed′);top!==undefined?(divBar).css(TOP, topPadding + PX) : (divBar).css(BOTTOM,bottomPadding+PX);varviewWidth=(win).width();
                    checkMarkup(viewWidth);
                    if (cfg.markupType === -2){return;}
                    $(divBar).css(LEFT, xPos + PX);
                };
            } else {
                // for non-IE
                cal = function () {
                    
                    (divBar).css(′position′:′fixed′);top!==undefined?(divBar).css(TOP, topPadding + PX) : (divBar).css(BOTTOM,bottomPadding+PX);varviewWidth=document.body.clientWidth;checkMarkup(viewWidth);if(cfg.markupType===−2)return;(divBar).css(LEFT, xPos + PX);
                };
            }
            self._calcPos = cal;
            return cal();
        },
        /* win 注册 scroll resize 事件
         * @param flag -> true 指滚动 flag -> false 指缩放
         */
        _decorate: function(flag){
            var self = this,
                cfg = self.config,
                divBar = self.container,
                DELAY = 100,
                scrollTimer,
                resizeTimer;
            if(flag){
                var scrollTop = document.documentElement.scrollTop + document.body.scrollTop;
                if(0 === scrollTop && cfg.display === 0){
                    (divBar).css(′opacity′:0);(divBar).css('zIndex', -1);
                }else {
                    (divBar).css(′opacity′:1);(divBar).css('zIndex', cfg.zIndex);
                    scrollTimer && clearTimeout(scrollTimer);
                    scrollTimer = setTimeout(function(){
                        self._calcPos();
                    },DELAY);
                }
            }else{
                resizeTimer && clearTimeout(resizeTimer);
                resizeTimer = setTimeout(function(){
                    self._calcPos();
                },DELAY);
            }
        }
    };
    return ActiveTool;

})(window);

 

 

 

 

编辑推荐：
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
阅读排行：
· 周边上新：园子的第一款马克杯温暖上架
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试？测试工程师会被淘汰吗？
· 使用C#创建一个MCP客户端
点击右上角即可分享
微信分享提示
AI IDE Trae