使用JS实现一个匀速回到顶部的效果

最新推荐文章于 2024-07-05 10:20:02 发布

原创最新推荐文章于 2024-07-05 10:20:02 发布 · 885 阅读

0 ·

CC 4.0 BY-SA版权

JS 同时被 2 个专栏收录

72 篇文章

订阅专栏

Jquery

44 篇文章

订阅专栏

本文介绍如何利用JavaScript编写一个平滑、匀速的返回页面顶部的功能，以提升用户体验。通过简单的Jquery代码示例，理解实现这一效果的原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用Jquery的回到顶部方法:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--百度在线压缩地址-->
    <script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
    <style>

        *{
            margin:0;
            padding:0;
        }
        /*今日头条的右侧按钮设计思路:先给按钮设计一个固定定位,离顶部距离固定,离左边位置为50% 
加上一定的margin值*/
        #but{
            width: 200px;
            /*background: yellow;*/
            padding-left:130px;
            box-sizing: border-box;
            position:fixed;
            left: 50%;
            top: 600px;
            margin-left: 470px;
        }
        #but button{
            width: 70px;
            display: none;
        }
        .content{
            width: 1200px;
            background: skyblue;
            margin:0 auto;
        }
    </style>
</head>
<body>
<div class="content">
    <h1>00000001</h1>
    <h1>00000002</h1>
    <h1>00000003</h1>
    <h1>00000004</h1>
    <h1>00000005</h1>
    <h1>00000006</h1>
    <h1>00000007</h1>
    <h1>00000008</h1>
    <h1>00000009</h1>
    <h1>00000010</h1>
    <h1>00000011</h1>
    <h1>00000012</h1>
    <h1>00000013</h1>
    <h1>00000014</h1>
    <h1>00000015</h1>
    <h1>00000016</h1>
    <h1>00000017</h1>
    <h1>00000018</h1>
    <h1>00000019</h1>
    <h1>00000020</h1>
    <h1>00000021</h1>
    <h1>00000022</h1>
    <h1>00000023</h1>
    <h1>00000024</h1>
    <h1>00000025</h1>
    <h1>00000026</h1>
    <h1>00000027</h1>
    <h1>00000028</h1>
    <h1>00000029</h1>
    <h1>00000030</h1>
    <h1>00000031</h1>
    <h1>00000032</h1>
    <h1>00000033</h1>
    <h1>00000034</h1>
    <h1>00000035</h1>
    <h1>00000036</h1>
    <h1>00000037</h1>
    <h1>00000038</h1>
    <h1>00000039</h1>
    <h1>00000040</h1>
    <h1>00000041</h1>
    <h1>00000042</h1>
    <h1>00000043</h1>
    <h1>00000044</h1>
    <h1>00000045</h1>
    <h1>00000046</h1>
    <h1>00000047</h1>
    <h1>00000048</h1>
    <h1>00000049</h1>
    <h1>00000050</h1>
    <h1>00000051</h1>
    <h1>00000052</h1>
    <h1>00000053</h1>
    <h1>00000054</h1>
    <h1>00000055</h1>
    <h1>00000056</h1>
    <h1>00000057</h1>
    <h1>00000058</h1>
    <h1>00000059</h1>
    <h1>00000060</h1>
</div>
<div id="but">

        <button id="bt">回到顶部</button>

</div>

<script>
    //默认的回到顶部按钮是隐藏的,我们要先获取滚动条离顶部的高度,超过100px就设置为显示
    //当页面滚动条发生滚动的时候,window 或者document 都可以
    $(document).scroll(
            function(){
                //判断,滚动条的高度
                if($(document).scrollTop() > 100){
                    $("#but button").show();
                }else{
                    $("#but button").hide();
                }
            }
    );
    $("#bt").click(function(){
        $('body,html').animate({scrollTop:0},300);
        return false;
    });
</script>
</body>
</html>