jQuery实现简单而且很酷的返回顶部链接效果

最新推荐文章于 2022-08-07 23:01:34 发布

一天一天积累

最新推荐文章于 2022-08-07 23:01:34 发布

阅读量905

点赞数

分类专栏： css样式 jquery javascript 文章标签： jQuery 返回顶部锚点 js 渐变

本文链接：https://blog.csdn.net/u012011360/article/details/41867779

版权

css样式同时被 3 个专栏收录

36 篇文章 0 订阅

订阅专栏

javascript

31 篇文章 0 订阅

订阅专栏

jquery

24 篇文章 0 订阅

订阅专栏

demo：

html部分：

<!doctype html>
<html>

<head>
 <meta charset="utf-8">
 <meta name="description" content="">
 <meta name="keywords" content="">
 <title>返回页面顶部</title>
 <link rel="stylesheet" type="text/css" href="css/style.css">
 <script type="text/javascript" src="../jquery/js/jquery-1.7.2.min.js"></script>
</head>

<body>

 1
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 2
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 3
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 4
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 5
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 <div id="back_to_top">
 <a href="#">
 <div>返回顶部</div>
 <div>广告或图片部分</div>
 </a>

 </div>
 <script type="text/javascript" src="js/returntop.js">
 </script>
</body>
</html>

css样式：

#back_to_top {
            position: fixed;
            bottom: 100px;
            right: 0px;
            width: 100px;
            height: 100px;
            background: #ccc;
            -moz-transition: background 1s;/*鼠标经过颜色渐变效果*/
            -webkit-transition: background 1s;
            -o-transition: background 1s
        }
        #back_to_top:hover {
            background: #aaa;
        }

js文件：

$(document).ready(function () {
    $("#back_to_top").hide();//首先将#back-to-top隐藏
    $(function () {
        $(window).scroll(function () {
            if ($(window).scrollTop() > 100) {//当滚动条的位置处于距顶部100像素以下时，跳转链接出现，否则消失
                $("#back_to_top").fadeIn(1500);
            } else {
                $("#back_to_top").fadeOut(1500);

            }
        });
        //点击后返回到顶部
        $("#back-to-top").click(function () {
            $('body,html').animate({
                scrollTop: 0
            }, 1000);
            return false;
        });
    });
});