新版回到顶部,兼容各种浏览器

直接上代码

/**
 * 在页面上产生个gotop按钮。 用纯粹的JS实现,无须额外的CSS和HTML支持,兼容所有浏览器。
 * 
 * @param int
 *            width 网页的主体宽度,以下三种取值 - 0 按钮靠浏览器左 - -1 按钮靠流利器右 - 其它正数 按钮靠网页内容右侧
 * @return void
 */
function goto_top(width)
{
    //var gotop = document.querySelector('#goto-top');
    var gotop = document.getElementById('goto-top');
 
    gotop.style.visibility = (document.body.scrollTop + document.documentElement.scrollTop > 10) ? 'visible' : 'hidden';
    if(0 == width)
    { 
        gotop.style.left = '0em';  
    }
    else if(-1 == width)
    { 
        gotop.style.right = '0em';  }
    else
    {
        var resize = function()
        {
            var left = (document.documentElement.clientWidth - width) / 2 + width + 10;
              
              if(!left){
                left = 0;
            }
            if((left - gotop.clientWidth) < width)
            {
                gotop.style.right='0em';
                gotop.style.left = null;  // 设定了right属性,则需要取消left属性。
            }
            else
            {
                if(window.navigator.userAgent.indexOf("IE") == -1 || parseInt(navigator.appVersion.match(/MSIE ([\d]+)./i)[1])>=9){
                    gotop.style.left = left + 'px';
                }else{
                    gotop.style.left = left;
                }
                gotop.style.right = null;
            }
        };
        resize();
        if(window.navigator.userAgent.indexOf("IE") == -1 || parseInt(navigator.appVersion.match(/MSIE ([\d]+)./i)[1])>=9){
            window.addEventListener('resize', function() { resize(); }, false);
        }else{
            window.attachEvent('resize', function() { resize(); }, false);
        }
    }
 
    if(window.navigator.userAgent.indexOf("IE") == -1|| parseInt(navigator.appVersion.match(/MSIE ([\d]+)./i)[1])>=9){
        gotop.addEventListener('click', function()
        {
            // IE9和opera下body.scrollTop为0,chrome下documentElement.scrollTop为0
            // 两者始终有一个为0
            var h = document.body.scrollTop + document.documentElement.scrollTop; // 当前位置
            var t = window.setInterval(function()
                    {
                        window.scrollTo(0,h -= 100); // 每次上移100像素
                        if(h <= 0)
                        { window.clearInterval(t);  }
                    }, 5);
        }, false);
         
        /* 通过window.onscroll事件确定按钮是否需要显示 */
        window.addEventListener('scroll', function()
        {
            var scrollTop = document.body.scrollTop + document.documentElement.scrollTop;
            gotop.style.visibility = scrollTop > 10 ? 'visible':'hidden';
        }, false);
    }else{
        if(gotop.attachEvent){
            gotop.attachEvent('onclick', function()
            {
                // IE9和opera下body.scrollTop为0,chrome下documentElement.scrollTop为0
                // 两者始终有一个为0
                var h = document.body.scrollTop + document.documentElement.scrollTop; // 当前位置
                var t = window.setInterval(function()
                        {
                            window.scrollTo(0,h -= 100); // 每次上移100像素
                            if(h <= 0)
                            { window.clearInterval(t);  }
                        }, 5);
            }, false);
        }
         
        /* 通过window.onscroll事件确定按钮是否需要显示 */
        if(window.attachEvent){
            window.attachEvent('onscroll', function()
            {
                var scrollTop = document.body.scrollTop + document.documentElement.scrollTop;
                gotop.style.visibility = scrollTop > 10 ? 'visible':'hidden';
            }, false);
        }
    }
}

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注


*

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>