返回顶部之实现

返回顶部的快捷按钮在web页面中普遍存在，不过有些的实现不理想，滚动条是瞬间滚到页面顶部，过程不平滑而影响效果。在这里列举实现返回顶部的几个方法。

1、使用锚点

页面顶部的元素设置id值，返回顶部由a标签实现，a标签的href值为之前页面顶部元素的id值。

代码如下：

1 <div id="container">
2    <p>足够使container出现滚动条的内容</p>
3 </div>
4 <a id="goToTop" href="#container">返回顶部</a>
View Code

利用浏览器a标签的锚点功能，可以很容易实现返回顶部，不过滚动条滚动过程中并不平滑。

2、使用DOM的scrollIntoView方法

绑定返回顶部按钮的点击事件，事件回调函数中调用页面顶部元素的scrollIntoView方法。

代码如下：

1 //绑定返回顶部按钮点击事件
2 $('#goToTop').on('click', function(e){
3     //target为容器顶部元素id
4     document.getElementById('target').scrollIntoView();
5 });
View Code

scrollIntoView接受一个参数，为true将滚动到元素bottom位置，为false或不传将滚动到元素top位置。缺点同使用锚点一样。

3、使用scroll方法并添加动画效果

这里使用动画来使滚动条滚动过程平滑。我封装成一个组件，方便调用，代码如下：

 1 (function($, window, undefined){
 2     var hasOwnProperty = Object.prototype.hasOwnProperty;
 3 
 4     function SmoothScroll(config){
 5         return this._init(config);
 6     }
 7 
 8     SmoothScroll.prototype = {
 9         constructor: SmoothScroll,
10 
11         _init: function(config){
12             var me = this; 
13 
14             me._config = $.extend({
15                 //container
16                 //go2Top 
17                 //destination
18                 duration: 500,
19                 scrollTop: 20    
20             }, config);
21             me._cacheParam()._bindEventListener();
22 
23             return me;   
24         },
25 
26         _cacheParam: function(){
27             var i,
28                 me = this,
29                 config = me._config;
30 
31             for(i in config){
32                 if(hasOwnProperty.call(config, i)){
33                     me['_' + i] = config[i];
34                     config[i] = null;
35                     delete config[i];   
36                 }
37             }
38 
39             return me;
40         },
41 
42         _bindEventListener: function(){
43             var me = this,
44                 $go2Top = me._go2Top,
45                 $container = me._container;
46 
47             me._showOrHideGo2Top();    
48             $container.on('scroll.smoothccroll', function(e){
49                  me._showOrHideGo2Top();
50             });
51             $go2Top.on('click.smoothccroll', function(e){
52                 me._smoothScroll();
53                 return false;
54             }); 
55 
56             return me;   
57         },
58 
59         _smoothScroll: function(duration){
60             var step,
61                 distance,
62                 me = this,
63                 $container = me._container,
64                 destination = me._destination.offset().top;
65 
66             duration = duration == null ? me._duration : duration;
67             if(duration < 0){
68                 me._showOrHideGo2Top();
69                 return;
70             }
71             distance = destination - $container.scrollTop();
72             step = distance / duration * 10;
73             me._smoothScrollTime = setTimeout(function(){
74                 if(!isNaN(parseInt(step, 10))) {
75                     $container.scrollTop($container.scrollTop() + step);
76                     me._smoothScroll(duration - 10); 
77                 }else{
78                     me._showOrHideGo2Top();
79                 }   
80             }, 10);  
81 
82             return me;                  
83         },
84 
85         _showOrHideGo2Top: function(){
86             var me = this,
87                 $go2Top = me._go2Top;
88 
89             me._container.scrollTop() > me._scrollTop ? $go2Top.show() : $go2Top.hide();
90 
91             return me;
92         }
93     };
94 
95     window.SmoothScroll = SmoothScroll;
96 })(jQuery, this);
View Code

在线演示

Demo下载

posted on 2014-04-03 13:49  shiny_bender  阅读(287)  评论(0)  编辑  收藏  举报

导航