JQuery之回到顶部的特效

首先在页面中加上回到顶部的html的代码：

<a href="#0" class="cd-top">Top</a>

然后对这个按钮进行修饰：
1.基本样式：

.cd-top {
    display: inline-block;
    height: 40px;
    width: 40px;
    position: fixed;
    bottom: 40px;
    right: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    /* image replacement properties */
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    background: rgba(232, 98, 86, 0.8) url(cd-top-arrow.svg) no-repeat center 50%;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

2.当鼠标移上去后的效果：

.no-touch .cd-top:hover {
    background-color: #e86256;
    opacity: 1;
} 

3.当屏幕可见按钮时的样式：

.no-touch .cd-top:hover {
    background-color: #e86256;
    opacity: 1;
} 

4.当屏幕继续往下滑时候的样式：

.cd-top.cd-fade-out { 
    opacity: .5;
}

好了，准备稳妥，需要添加js事件。
先声明所需变量：

    //当到达这个限度地时候，按钮会出现
    var offset = 300 ;
    //当到达这个限度地时候，图标会变暗
    var offset_opacity = 1200; 
    //定义跳转到顶部的时间，duration持续的时间
    var scroll_top_duration = 700;
    //grab the "back to top" link，grab抢占，抓住，获取
    var $back_to_top = $('.cd-top');

添加屏幕滚动事件：

    $(window).scroll(function () {
        ($(this).scrollTop() > offset) ? $back_to_top.addClass('cd-is-visible') : $back_to_top.removeClass('cd-is-visible cd-fade-out');
        if ($(this).scrollTop() > offset_opacity) {
            $back_to_top.addClass('cd-fade-out');
        }
    }); 

最后，添加点击按钮回到顶部的事件：

    $back_to_top.on('click', function (event) {
        event.preventDefault();
        $('body,html').animate({
            scrollTop: 0,
        }, scroll_top_duration
                );
    });

ok，这样就可以了，在屏幕滚动到一定的像素，回到顶部的按钮会出现，如果继续往下滚动，就会变得暗，当鼠标放到按钮上会变得亮，点击后，会有动画渐变的回到顶部。