网站地图    收藏   

主页 > 前端 > javascript >

js实现回到顶部按钮程序代码

来源:自学PHP网    时间:2014-09-19 14:47 作者: 阅读:

[导读] 我们经常会看到很多网站会有一个在右下解移动的,点击可直接回到顶部的按钮哦,下面我来介绍利用js实现回到顶部的方法,有需要的朋友可参考。...

重要的是全部使用js来实现,不需要在html、css中增加任何内容,甚至都不需要图片,只要引用js即可。而且全面兼容IE6。由于考虑兼容性问题

实现原理是我们获取当前ie高度然后再滚动上来

前主流浏览器除IE外对浏览器标准支持都比较好,例如chrome、firefox以及safari等。对应后者,可以通过window对象的pageYOffset属性来取到当前滚动条到页面顶部的高度。对于万恶的IE来说就比较麻烦一点,它依赖当前文档类型。文档类型分为Standards Mode和Quirks Mode,页面声明了DOCTYPE时为Standards Mode,反之为Quirks Mode。可以使用document.compatMode来获取,该方法也同时支持其他浏览器,其返回值为BackCompat或CSS1Compat,含义如下:

 代码如下 复制代码

BackCompat Standards-compliant mode is not switched on. (Quirks Mode)

CSS1Compat Standards-compliant mode is switched on. (Standards Mode)由于IE对盒模型的渲染跟文档类型有很大关系,所以获取滚动条高度的方式也是不一样的。当文档类型为Standards Mode,获取方式为:document.documentElement.scrollTop,而Quirks Mode时则为:document.body.scrollTop。

理解上面的所提到的差异后,用代码实现就很容易了,具体实现的代码如下:

 代码如下 复制代码
function getScrollTop1() {
    if ('pageYOffset' in window) {
        return window.pageYOffset;
    } else if (document.compatMode === "BackCompat") {
        return document.body.scrollTop;
    } else {
        return document.documentElement.scrollTop;
    }
}

甚至可以修改上述代码,使用一行代码搞定,但是可读性没有上面好,代码如下:

 代码如下 复制代码

function getScrollTop() {
    return !('pageYOffset' in window)
                ? (document.compatMode === "BackCompat")
                ? document.body.scrollTop
                : document.documentElement.scrollTop
                : window.pageYOffset;
}

function getScrollTop() {
    return ('pageYOffset' in window) ? window.pageYOffset
        : document.compatMode === "BackCompat"
        && document.body.scrollTop
        || document.documentElement.scrollTop ;
}

另外除了上述document.compatMode的方式来获取文档类型外,还可以使用 document.defaultView来获取。在IE 9以下的Quirks Mode中document不支持defaultView属性

计了这么多来下面来看实现代码代码如下:

 代码如下 复制代码

(function() {
    var btnId = '__gotop';
    var isIE = !!window.ActiveXObject && /msie (d)/i.test(navigator.userAgent) ? RegExp['$1'] : false;

    function $() {
        return document.getElementById(arguments[0]);
    }

    function getScrollTop() {
        return ('pageYOffset' in window) ? window.pageYOffset
            : document.compatMode === "BackCompat"
            && document.body.scrollTop
            || document.documentElement.scrollTop ;
    }   

    function bindEvent(event, func) {
        if (window.addEventListener) {
            window.addEventListener(event, func, false);
        } else if (window.attachEvent) {
            window.attachEvent('on' + event, func);
        }
    }

    bindEvent('load',
        function() {
            var css = 'background-color:#999;width:50px;height:50px;position:fixed;right:100px;bottom:30px;border-radius:10px;cursor:pointer;display:none;';

            if (isIE && isIE < 7) {
                css += '_position:absolute;_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-30-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)))';
                var style = document.createStyleSheet();
                style.cssText = '*html{background-image:url(about:blank);background-attachment:fixed;}';
            }

            var html = '<div style="height: 0;width: 0;border:14px solid #999999;border-top: 0 none;border-bottom:14px solid #fff;position: relative;margin:12px 0 0 11px;"><div style="width:8px;height:7px;position:absolute;top:14px;left:-4px;background-color:#fff;overflow: hidden;"></div></div>';
            var el = document.createElement('DIV');
            el.id = btnId;
            el.style.cssText = css;
            el.innerHTML = html;
            document.body.appendChild(el);

            el.onclick = function() {
                (function() {
                    var top = getScrollTop();
                    if (top > 0) {
                        window.scrollTo(0, top / 1.2)
                        setTimeout(arguments.callee, 10);
                    }
                })();
            };

            el.onmouseover = function() {
                $(btnId).firstChild.style.borderBottom = '14px solid #ddd';
                $(btnId).firstChild.firstChild.style.backgroundColor = '#ddd';
            };

            el.onmouseout = function() {
                $(btnId).firstChild.style.borderBottom = '14px solid #fff';
                $(btnId).firstChild.firstChild.style.backgroundColor = '#fff';
            };
        }
    );

    bindEvent('scroll',
        function() {
            var top = getScrollTop(), display = 'none';

            if (top > 0) {
                display = 'block';
            }

            if ($(btnId)) $(btnId).style.display = display;
        });
})();

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论