JQuery之回到顶部的特效

原创 2015年07月10日 11:07:06

首先在页面中加上回到顶部的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,这样就可以了,在屏幕滚动到一定的像素,回到顶部的按钮会出现,如果继续往下滚动,就会变得暗,当鼠标放到按钮上会变得亮,点击后,会有动画渐变的回到顶部。

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

返回顶部【超炫】jquery特效

  • 2016年04月09日 13:09
  • 672KB
  • 下载

jquery随笔小特效之唯品会顶部菜单栏

我感觉代码还是有点繁琐,应该可以跟简便一点的                           vip导航效果 * { margin: 0; pad...

JQuery 动画卷页 返回顶部 动画特效(兼容Chrome)

首先给这些‘返回页首'的链接加上个Class: 返回页首↑ 然后加入下面jQuery代码,你可以把这行代码放在前,或者其它位置。当然你还要在里包含jQuery库文件。 jQuery(doc...

jquery移动到顶部特效

  • 2014年03月11日 15:43
  • 52KB
  • 下载

网站点击导航栏标题,对应的元素平滑上移以及点击图片或按钮回到页面顶部的特效

之前看w3cshool上面,看到了a,name配合可以设置锚点,很多看书的网站上都用到,可以根据点击对应的目录章节,自动跳到具体的文字内容。 不过用锚点做的特效感觉很粗糙,不够平滑,总是一下子就跳到下...

回到顶部火箭特效

  • 2013年10月31日 16:17
  • 109KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JQuery之回到顶部的特效
举报原因:
原因补充:

(最多只允许输入30个字)