返回顶部之实现

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

1、使用锚点

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

代码如下：

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

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

2、使用DOM的scrollIntoView方法

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

代码如下：

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

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

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

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

(function($, window, undefined){
    var hasOwnProperty = Object.prototype.hasOwnProperty;

    function SmoothScroll(config){
        return this._init(config);
    }

    SmoothScroll.prototype = {
        constructor: SmoothScroll,

        _init: function(config){
            var me = this; 

            me._config = $.extend({
                //container
                //go2Top 
                //destination
                duration: 500,
                scrollTop: 20    
            }, config);
            me._cacheParam()._bindEventListener();

            return me;   
        },

        _cacheParam: function(){
            var i,
                me = this,
                config = me._config;

            for(i in config){
                if(hasOwnProperty.call(config, i)){
                    me['_' + i] = config[i];
                    config[i] = null;
                    delete config[i];   
                }
            }

            return me;
        },

        _bindEventListener: function(){
            var me = this,
                $go2Top = me._go2Top,
                $container = me._container;

            me._showOrHideGo2Top();    
            $container.on('scroll.smoothccroll', function(e){
                 me._showOrHideGo2Top();
            });
            $go2Top.on('click.smoothccroll', function(e){
                me._smoothScroll();
                return false;
            }); 

            return me;   
        },

        _smoothScroll: function(duration){
            var step,
                distance,
                me = this,
                $container = me._container,
                destination = me._destination.offset().top;

            duration = duration == null ? me._duration : duration;
            if(duration < 0){
                me._showOrHideGo2Top();
                return;
            }
            distance = destination - $container.scrollTop();
            step = distance / duration * 10;
            me._smoothScrollTime = setTimeout(function(){
                if(!isNaN(parseInt(step, 10))) {
                    $container.scrollTop($container.scrollTop() + step);
                    me._smoothScroll(duration - 10); 
                }else{
                    me._showOrHideGo2Top();
                }   
            }, 10);  

            return me;                  
        },

        _showOrHideGo2Top: function(){
            var me = this,
                $go2Top = me._go2Top;

            me._container.scrollTop() > me._scrollTop ? $go2Top.show() : $go2Top.hide();

            return me;
        }
    };

    window.SmoothScroll = SmoothScroll;
})(jQuery, this);

在线演示

Demo下载