回到顶部的几种实现方法

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

@Demi

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

阅读量4.6w

点赞数 31

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_38128179/article/details/85161910

版权

JavaScript 专栏收录该内容

61 篇文章 14 订阅

订阅专栏

【1】使用默认链接锚点

添加一个a链接，设置a链接的href属性值为"#top"即可实现

<body>
    <div>我在顶部</div>

    <!-- 很多内容 -->
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
    <!-- 很多内容 -->

    <div><a href="#top">返回顶部</a></div>
</body>

【2】href指向特定的id

给页面顶部元素设置一个id值，将返回顶部a链接的href属性指向改id属性的元素

<body>
    <div id="header">我在顶部</div>

    <!-- 很多内容 -->
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
    <!-- 很多内容 -->

    <div><a href="#header">返回顶部</a></div>
</body>

【3】使用自定义链接锚点

在页面顶部定义一个锚点，然后将返回顶部a链接的href属性指向该锚点

<body>
    <a name="goTop"></a>
    <div>我在顶部</div>

    <!-- 很多内容 -->
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
    <!-- 很多内容 -->

    <div><a href="#goTop">返回顶部</a></div>
</body>

【4】使用简单的JavaScript脚本

设置scrollTo(x,y)中的x和y的坐标值来滚动到页面的具体位置

<body>
    <div>我在顶部</div>

    <!-- 很多内容 -->
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
    <!-- 很多内容 -->

    <div><a href="javascript:window.scrollTo(0,0)">返回顶部</a></div>
</body>

【5】火箭上升式返回顶部（jQuery实现）

上面几种方式实现起来比较简单，但是效果生硬，直接从底部切换到顶部，没有一个过渡的动画。此方法能使页面动态滚动，同时将按钮换成一个箭头标志，判断页面滚动的距离，当页面滚动到一定的距离后再显示返回顶部箭头标志。这样的效果更佳生动。

<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">
    <title>Document</title>
    <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
    <style>
        .header {
            color: rgb(243, 152, 6);
            width: 100%;
            height: 200px;
            margin: 0 auto;
            text-align: center;
            font-size: 20px;
        }
        .footer {
            position: fixed;
            right: 50px;
            bottom: 50px;
            width: 54px;
            height: 54px;
        }
    </style>
</head>
<body>
    <div class="header">我在顶部</div>
    <!-- 很多内容 -->
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
    <!-- 很多内容 -->
    <img class="footer" id="gotoTop" src="https://i02piccdn.sogoucdn.com/4f3b2858eec9e2cf" alt="">

    <script>
        function gotoTop(minHeight){

            // 定义点击返回顶部图标后向上滚动的动画
            $("#gotoTop").click(
                function(){$('html,body').animate({scrollTop:'0px'},'slow');
            })

            // 获取页面的最小高度，无传入值则默认为600像素
            minHeight? minHeight = minHeight:minHeight = 600;

            // 为窗口的scroll事件绑定处理函数
            $(window).scroll(function(){

                // 获取窗口的滚动条的垂直滚动距离
                var s = $(window).scrollTop();

                // 当窗口的滚动条的垂直距离大于页面的最小高度时，让返回顶部图标渐现，否则渐隐
                if( s > minHeight){
                    $("#gotoTop").fadeIn(500);
                }else{
                    $("#gotoTop").fadeOut(500);
                };
            });
        };
        gotoTop();
    </script>
</body>

文章每周持续更新，可以微信搜索「 前端大集锦 」第一时间阅读，回复【视频】【书籍】领取200G视频资料和30本PDF书籍资料

@Demi

关注

31
点赞
踩
97

收藏

觉得还不错? 一键收藏
打赏
4
评论
回到顶部的几种实现方法

【1】使用默认链接锚点添加一个a链接，设置a链接的href属性值为"#top"即可实现<body> <div>我在顶部</div>  <br><br><br><br><br><br><br><b...
复制链接

扫一扫