回到顶部实现方法

最新推荐文章于 2022-09-12 15:09:09 发布

欢乐程序小姐姐

最新推荐文章于 2022-09-12 15:09:09 发布

阅读量154

点赞数 3

本文链接：https://blog.csdn.net/weixin_46513664/article/details/104971804

版权

本文详细介绍了在网页设计中实现返回顶部功能的四种常见方法：使用自定义链接锚点、href指向特定的id、使用默认链接锚点以及利用JavaScript的scrollTop属性。这些方法各有优缺点，适用于不同的场景。

摘要由CSDN通过智能技术生成

一、使用自定义链接锚点

在页面顶部定义一个锚点，然后将返回顶部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>

二、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>

三、使用默认链接锚点

添加一个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>

四、使用scrollTop

<body>
    <div class="box"></div>
    <div class="toTop">回到顶部</div>
    <script src="../jquery-1.12.4.js"></script>
    <script>
    //方法一
        $(".toTop").click(function(){
             $(document).scrollTop(0)
        })
   //方法二
        $(".toTop").click(function(){
            console.log(0)
            $("body,html").animate({
                "scrollTop":0
            },1000)
        })
        
    </script>
</body>