返回顶部jquery特效

代码2015-06-242,353 人已阅来源：网络
简洁的jquery返回顶部特效，类似于腾讯网首页的特效，非常棒的特效。其中里面的渐隐渐现效果的时间与速度，都是可以更改的。
运行代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jQuery返回顶部特效 - web前端资源网 www.tonjay.com</title>
</head>
<body>
    <style type="text/css">
        /*返回顶部*/
        #roll_top {cursor:pointer;height:60px;width:60px;display:block;background:#448fd0;color:#fff;text-align:center;line-height:60px;text-decoration:none;}
        #roll_top:hover {background:#3399ff;}
        #roll {width:60px;position:fixed;right:30px;bottom:50px;}
    </style>
    <p align="center">
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
        tonjay.com<br />
    </p>
    <div id="roll"> <a title="回顶部" id="roll_top" href="javascript:;" style="display: block; ">top</a> </div>
    <script type="text/javascript" src="https://libs.baidu.com/jquery/1.6.0/jquery.min.js"></script>
    <script type="text/javascript">
        jQuery(function () {
            /*返回顶部与找客服*/
            var jq = jQuery;
            jq('#roll_top').hide();
            jq(window).scroll(function () {
                if (jq(window).scrollTop() > 0) {
                    jq('#roll_top').fadeIn(400);//当滑动栏向下滑动时，按钮渐现的时间
                } else {
                    jq('#roll_top').fadeOut(200);//当页面回到顶部第一屏时，按钮渐隐的时间
                }
            });
            jq('#roll_top').click(function () {
                jq('html,body').animate({
                    scrollTop: '0px'
                }, 200);//返回顶部所用的时间 www.tonjay.com web前端资源网注
            });
        });
    </script>
</body>
</html>
AIHX

返回顶部jquery特效

相关内容
