JQuery实现返回顶部

最新推荐文章于 2023-06-13 10:37:33 发布

Macro_30

最新推荐文章于 2023-06-13 10:37:33 发布

阅读量326

点赞数

分类专栏： JQuery 文章标签： jquery

本文链接：https://blog.csdn.net/qq_40961508/article/details/114211696

版权

JQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
#back-to-top{    position:fixed;display:none; bottom:100px; right:80px;}
#back-to-top a{  text-align:center;  text-decoration:none; color:red; display:block; width:64px;}
#back-to-top a:hover{ color:#979797;}
#back-to-top a span{ 
    border-radius:6px;  display:block; height:64px; width:56px;margin-bottom:5px;
    
}

    </style>
</head>
<body>
    <div style="margin-top:130px;height: 400px;background-color: plum;"></div>
    <div style="margin-top:130px;height: 400px;background-color: palegoldenrod;"</div>
    <div style="margin-top:130px;height: 400px;background-color: powderblue;"></div>
    <p id="back-to-top"><a href="#top"><span></span>返回顶部</a></p> 
     
</body>
<script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.12.4.min.js"></script>

<script>
$(function(){
        //当滚动条的位置处于距顶部100像素以下时，跳转链接出现，否则消失
        $(function () {
            $(window).scroll(function(){
                if ($(window).scrollTop()>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;
            });
        });
    });
</script>
</html>

Macro_30

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery实现返回顶部

<!DOCTYPE html><html lang="en"><head> <style>#back-to-top{ position:fixed;display:none; bottom:100px; right:80px;}#back-to-top a{ text-align:center; text-decoration:none; color:red; display:block; width:64px;}#back-to-
复制链接

扫一扫