YAOHAIXIAO.COM

HTML(5),CSS(3),JavaScript,DOM,Ajax,JSON,Front-end technologies & Yaohaixiao

热门标签:JavaScript Performance 前端开发 前端性能优化 原创

Rss

Home » Frontend » JavaScript » jQuery » JavaScript 实例教程 – jQuery 实现返回顶部效果

JavaScript 实例教程 – jQuery 实现返回顶部效果

Back to Top – 目前很多网站都使用的一个实用的效果,在页面内容比较长的页面时,用户浏览内容(窗口滚动条)到一定位置时,在内容主题部分的右边会有一个“返回顶部”的按钮,用户点击这个窗口就自动滚动到页面顶端。这个交互设计对提高用户的浏览体验确实有帮助,那么怎么实现呢?今天我就来讲讲如何实现这个效果。

返回顶部按钮的 XHTML 代码

我们看到效果图,返回顶部按钮是显示在主体内容的外边。不过显示在外面,并不代表这个按钮的代码在内容之外,而实际上它应该写在主体内容页脚(footer)里面的:

<div class="wrap footer">
    <p>
        Copyright © 2008 - 2012 <a href="http://www.yaohaixiao.com/">YAOHAIXIAO.COM</a>, All right reserved.
    </p>
    <p>
        Powered by: <a target="_blank" href="http://www.wordpress.org/">Wordpress</a>, Theme <a target="_blank" href="http://www.yaohaixiao.com/wp-themes/bluenight-wordpress-theme/">BlueNight</a>
        designed by <a target="_blank" href="http://www.yaohaixiao.com/">Yaohaixiao</a>
    </p>
    <a title="返回顶部" id="lnk-backtop" class="lnk-backtop" href="#top" >TOP</a>
</div>

选择合理的 XHTML 标签和属性/值

如果接触 Web 时间长些朋友都应该有映像,以前“返回顶部”就是在页脚(footer)里的。为什在页脚?我想大家都清楚,因为到页脚了,我们才确实很需要“返回顶部”,因此将返回顶部代码写到页脚才是一个结构良好的 XHTML 代码的写法

另外,你会发现几乎所有的返回按钮都是用 a 标签模拟的,而且 href 值最好为 “#top”。看看下面的例子就会发现为什么 href="#top"

示例2:为什么是 href=”#top”?

对的,在没有 JavaScript 的支持的情况下,而且页面中都不需要写 <a name="top">top</a> 的锚点,几乎所有的主流浏览器都会在点击的按钮后返回到页面顶部。这正是做到了向后兼容和有好的可访性。

Position 定位返回顶部按钮

处理定位我们知道一定要用 positon,关键的技巧是如何让按钮可以紧贴在主题内容旁边。其实这个定位并不复杂,来看看我的 CSS 代码吧:

.wrap {
    margin: 0 auto;
    width: 980px;
    padding: 10px;
    clear: both;
    overflow: hidden;
}

.lnk-backtop:link, .lnk-backtop:visited, .lnk-backtop:hover {
    position: fixed;
    _position: absolute;
    z-index: 3;
    bottom: 80px;
    left: 50%;
    margin: 0 0 0 505px; /* 我这里让按钮里主体内容 5px */
    width: 49px;
    height: 35px;
    background: transparent url(images/sprites.gif) 0 -204px no-repeat;
    text-indent: -999px;
    outline: none;
    display: none;
    overflow: hidden;
}

这里的技巧就是首先设置 left: 50%;,那么按钮就会在屏幕正中间的位置开始显示。然后设置 margin-left:-(主体内容.offsetHeight()/2)px;。当然为支持的 position:fixed 的浏览设置 fixed,为 IE6 hack 一下:_position: absolue;。至于 bottom 的值可以选择一个你觉比好合适的值就 OK 了。这是要注意,我们这里设置的 left 值是针对 body 而设置的,所以 .wrap 或者我代码给出的 .footer 是不能设置 position:relative; 也不能设置 overflow: hidden;。不然就会定位不准或者看不到按钮了。下图是用 firebug 观察到的按钮的 margin 的定位图像。

定位很简单就搞定了,接下来我们看看如何用 JavaScript 编程来实现完整的效果。

返回顶部按钮的 JavaScript 编程

返回顶部按钮使用 JavaScript 编程要处理的有3件事情:

  1. 就是当窗口的滚动条滚动到一定距离的时候让按钮显示出来;
  2. 当窗口滚动条滚动到小于特定距离的时候,让按钮隐藏起来;
  3. 为 IE6 添加 fixed 的处理;

还是先看看完整的 JavaScript 代码吧:

/**
* @method backTop
* @param {String} [btnId] - 按钮的 ID 值 (可选)
* @param {Number} [startTop] - 开始显示按钮的高度值(可选)
* @param {Number} [scrollSpeed] - 为 IE6 fixed 定位处理的滚动时间间隔 (可选)
*/
var backTop = function(btnId, startTop, scrollSpeed){
        var isIE = $.browser.msie, 
        version = $.browser.version, 
        isNumber = function(num){
            return typeof num === 'number' && isFinite(num);
        }, 
        // 获得窗口的滚动条滚动距离
        getScrollTop = function(){
            return doc.documentElement.scrollTop || doc.body.scrollTop;
        }, 
        // 设置获得窗口的滚动条滚动距离
        setScrollTop = function(val){
            doc.documentElement.scrollTop = val;
            doc.body.scrollTop = val;
        }, 
        // 默认的按钮
        btnTop = $('#lnk-backtop'), 
        // 默认的显示按钮的滚动距离
        min = 480, 
        // 默认的滚动时间间隔
        speed = 20, 
        timer = null, 
        // 滚动窗口的处理函数
        move = function(){
            var scrollTop = getScrollTop();
            
            // 滚动到窗口顶部就不滚动了,并且释放计时器的资源
            if (scrollTop <= 0) {
                clearInterval(timer);
                return false;
            }
            
            // 滚动窗口
            // scrollTop / 1.1 做了一个简单的滚动缓冲处理
            // 滚动过程看上去不是那么生硬
            setScrollTop(scrollTop / 1.1);
        };
        
        if (btnId) {
            btnTop = $(btnId);
        }
        
        // 没有按钮就跳出程序
        if (!btnTop[0]) {
            return false;
        }
        
        if (startTop && isNumber(startTop)) {
            min = startTop;
        }
        
        if (scrollSpeed && isNumber(scrollSpeed)) {
            speed = scrollSpeed;
        }
        
        // 监测窗口的滚动
        $(window).scroll(function(){
            var scrollTop = getScrollTop(),
                // 获得当前窗口可视区域的高度
                viewportHeight = $(window).height();
            
            // 到特定距离显示或隐藏按钮
            scrollTop > min ? btnTop.show(100) : btnTop.hide(150);
            
            // 为 IE6(以下)浏览器 hack fixed
            if (isIE && version < 7) {
                setTimeout(function(){
                    btnTop.css('top', (viewportHeight + scrollTop - 80) + 'px');
                }, 100);
            }
        });
        
        // 点击按钮开始滚动
        btnTop.click(function(evt){
            timer = setInterval(move, speed);
            
            evt.preventDefault();
			evt.stopPropagation();
        });
    };

返回顶部按钮的隐藏和显示

要根据窗口的滚动距离控制显示或者隐藏按钮就必须为 window 绑定 scroll 事件:

// 监测窗口的滚动
        $(window).scroll(function(){
            var scrollTop = getScrollTop(),
                // 获得当前窗口可视区域的高度
                viewportHeight = $(window).height();
            
            // 到特定距离显示或隐藏按钮
            scrollTop > min ? btnTop.show(100) : btnTop.hide(150);
            
            // 为 IE6(以下)浏览器 hack fixed
            if (isIE && version < 7) {
                setTimeout(function(){
                    btnTop.css('top', (viewportHeight + scrollTop - 80) + 'px');
                }, 100);
            }
        });

scrollTop > min ? btnTop.show(100) : btnTop.hide(150); 隐藏显示的处理我就不多说了,这里要讲的是 getScrollTop() 函数:

// 获得窗口的滚动条滚动距离
getScrollTop = function(){
    return doc.documentElement.scrollTop || doc.body.scrollTop;
}

WebKit(Chrome,Safari) 之外的浏览器通过 doc.documentElement.scrollTop 就可以获得窗口滚动的距离,但是 WebKit 浏览器智能通过 doc.body.scrollTop 获得窗口滚动的距离。这个大家在开发是要特别注意。

很自然的,要设置窗口的滚动,我们也必须这么处理:

doc.documentElement.scrollTop = val;
doc.body.scrollTop = val;

不用担心,浏览器只会执行各自支持的方法,所以这么写不会有任何的兼容问题,反而是为了兼容必须这么写(至少到目前为止还是需要这么处理)。

IE6 的 fixed 定位的 Hack 技巧

作为前端工程师,我个人认为只要用户还在使用IE6,我们还是应该为这些用户考虑,只要处理的成本不高。IE6 不支持 fixed,的定位,所以需要给 IE6 添加 fixed 的处理。我没有选择 CSS Expression 的解决方案,我就讲讲要怎么根据页面的滚动来让按钮在 IE6 中位置也固定:

setTimeout(function(){
     btnTop.css('top', (viewportHeight + scrollTop - 80) + 'px');
}, 100);

(viewportHeight + scrollTop – 80),关键是要理解这个表达式的含义:

  • viewportHeight:$(window).height(),当前窗口可视区域的高度;
  • scrollTop:窗口滚动条的滚动高度;
  • 80: fixed 的 bottom 值 80px;

viewportHeight + scrollTop 这个距离刚好是页面滚动过的文档的最下端的距离,再减去 80 后就刚好是让按钮固定到了当前可视区域的上方 80px。对了,这个位置就是设置 position:fixed;bottom:80px; 的位置。这样窗口我们就做到了让按钮在滚动条滚动的时候,位置始终是固定的。

这里还要稍微说一下的一个处理技巧是我使用了 setTimeout(),设置了 100 毫秒的延时时间。这样做是为了减少页面重新定位按钮的次数,减少浏览器绘制按钮 DOM 的性能消耗。而 100 毫秒刚好是人们可以接受的卡一下的时间,整体滚动的效果还是比较平滑的。OK,返回顶部的实现原理就都讲解完毕了!

声明:本文采用BY-NC-SA协议进行授权。转载请注明转自:JavaScript 实例教程 – jQuery 实现返回顶部效果

« »

发表评论

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

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

(Spamcheck Enabled)