【第22期】观点:IT 行业加班,到底有没有价值?

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实战1:鼠标右击事件,回到顶部特效

jquery实战1:鼠标右击事件,回到顶部特效                 标题     *{margin:0px;padding:0px;}    ...

jQuery返回顶部特效,网页右下角的回到顶部按钮

//firefox 、google chrome IE 效果不同 [code="javascript"] 返回顶部特效,滚动条拖至最底部 $(function(){ var $backToTopTxt = "返回顶部", $backToTopEle = $('<div cla

jQuery动态回到顶部

jquery实现点击红色动态回到顶部 jquery动态回到顶部特效 #goTopBtn {position: fixed;line-height:36px;width:36px;bott...

一款基于jquery打造的鼠标响应式顶部弹出窗口特效

一款基于jquery打造的点击按钮顶部弹出提示层,点击页面中的按钮时, 会在浏览器顶部弹出一个提示层,分别不一样。还带有震动的效果! 非常适用于网页错误信息提示的jquery特效。 适用

jquery动态回到顶部特效

jquery动态回到顶部特效 #goTopBtn {position: fixed;line-height:36px;width:36px;bottom:35px;height:36px...
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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