html 通过滚动回到顶部

最新推荐文章于 2023-11-12 19:12:34 发布

hy3528

最新推荐文章于 2023-11-12 19:12:34 发布

阅读量637

点赞数

分类专栏： JQuery html

本文链接：https://blog.csdn.net/hy3528/article/details/103262812

版权

html 同时被 2 个专栏收录

73 篇文章 1 订阅

订阅专栏

JQuery

16 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.suoluomei.com/common/js/jquery-2.1.4.min.js"></script>
    <title>Document</title>
</head>
<style>
    .srccem{
        height: 9999px;
        width: 100%;
            margin: 0;
            background-color: white;
    }
    .returntop {
        position: fixed;
        bottom: 5px;
        right: 5px;
    }

    .returntop_img {
        width: 50px;
    }
</style>

<body>
        <div class="srccem"> 
        <div class="returntop">
                <img src="https://sucai.suoluomei.cn/sucai_zs/images/20191126182210-top.png" class="returntop_img">
          </div>
  

    </div>
</body>
<script>

    
        $(function(){
            $(".returntop").hide();
                    //当滚动条的位置处于距顶部300像素以下时，跳转链接出现，否则消失
                        $(window).scroll(function () {
                            if ($(window).scrollTop() > 300) {
                                $(".returntop").fadeIn(500);
                            } else {
                                $(".returntop").fadeOut(500);
                            }
                        });
                        //滑动回到顶部 点击事件
            $('.returntop').click(function(){
                $('body,html').animate({'scrollTop':0}, 700);
            })
        })
        </script>

</html>

首先，在html中，用到了两个div元素，给他们加上class（或者id）
然后我们设置srccem的高度，设高一点，这样就会产生滚动条
然后设置returntop，让它固定不变的在右下角
滑动特效要用到jQuery插件
然后我们再给returntop设定一个点击事件，设定方法如下

`   $('.returntop').click(function(){
                $('body,html').animate({'scrollTop':0}, 700);
            })
        })

为了让returntop滑动之后显示，所以要加一个方法

$(".returntop").hide();
                    //当滚动条的位置处于距顶部600像素以下时，跳转链接出现，否则消失
                        $(window).scroll(function () {
                            if ($(window).scrollTop() > 300) {
                                $(".returntop").fadeIn(500);
                            } else {
                                $(".returntop").fadeOut(500);
                            }
                        });

两个方法代码

<script>

    
        $(function(){
            $(".returntop").hide();
                    //当滚动条的位置处于距顶部600像素以下时，跳转链接出现，否则消失
                        $(window).scroll(function () {
                            if ($(window).scrollTop() > 300) {
                                $(".returntop").fadeIn(500);
                            } else {
                                $(".returntop").fadeOut(500);
                            }
                        });
                        //滑动回到顶部 点击事件
            $('.returntop').click(function(){
                $('body,html').animate({'scrollTop':0}, 700);
            })
        })
        </script>

hy3528

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
html 通过滚动回到顶部

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
复制链接

扫一扫