设为首页 - 加入收藏 焦点技术网
热搜:java
当前位置:首页 >

纯js实现网页返回顶部功能(万能的兼容目前所有浏览器)

导读:纯js实现网页返回顶部功能(万能的兼容目前所有浏览器)在web2.0时代,越来越多的网站如雨后春笋般的冒了出来。而且这些网站提供了很多我们常见的功能。如:返回顶部等等小特性。那么这些功能是如何实现的呢。这里将为大家提供一些快速使用的万能代码。(function() { var btnId = '__gotop'; var isIE = !!window.ActiveXObject &&...。。。

纯js实现网页返回顶部功能(万能的兼容目前所有浏览器)

在web2.0时代,越来越多的网站如雨后春笋般的冒了出来。而且这些网站提供了很多我们常见的功能。如:返回顶部等等小特性。

那么这些功能是如何实现的呢。这里将为大家提供一些快速使用的万能代码。

(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 = '
'; 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; });})();
在看看测试页面吧。

       返回顶部按钮                
看看效果吧:




(编辑: xmt1139057136)

网友评论