javaScript如何实现点击Top回到顶部，与带动画过渡效果

方形裤子的黄方块

已于 2022-05-17 16:48:19 修改

阅读量5.9k

点赞数 10

分类专栏： JavaScript 文章标签： javascript html css

于 2020-06-02 22:11:58 首次发布

本文链接：https://blog.csdn.net/weixin_46449470/article/details/106505709

版权

JavaScript 专栏收录该内容

16 篇文章 1 订阅

订阅专栏

一、 javaScript如何实现点击Top回到顶部

例子：
css代码

    <style>
        body{
            height: 3500px;
            font-size: 40px;
        }
        #ceshi{
            position: fixed;
            right: 0;
            bottom: 140px;
            width: 200px;
            height: 50px;
            background: gainsboro;   
            transition: 3s;
        }
        .footer{
            font-size: 40px;
            margin-top: 3300px;
            color: goldenrod;
        }
    </style>

html代码：
作用是点击button按钮，页面回归到顶部。

<body>
    <div>这是顶部了</div>
    
    <div class="footer">这是尾部了</div>
   
    <input type="button" id="ceshi" value="回到顶部" onclick="back()" >
</body>

js代码

function back(){
            window.scrollTo(0,0) //这是值  是指离网页顶部0px  
        }

二、动画过渡效果

完成上面3步，即可完成点击目标，回到页面顶部。
但是，这样跳转效果过于突兀，给予用户的体验不好，所以应该设置滑动的效果。

css与html代码保持不变，设置js代码

<script>
//这一步是为了防止，点击事件的过度发生。
var myTimer = -1;

function back(){
    //1、获取当前滚动了多少距离
    //2、启动定时器，以一定时间减少响应的滚动距离
    var scrollTo = document.documentElement.scrollTop || document.body.scrollTop
    if(myTimer == -1){
        myTimer = setInterval(() => {
            scrollTo -= 60
            if(scrollTo<=0){
                scrollTo = 0
                window.clearInterval(myTimer)
                myTimer = -1
            }
            
            window.scrollTo(0,scrollTo) //这是值  是指离开网页顶部的距离   
        }, 10);

    }

}
</script>

学会了吗？学会点了点个赞呗！~
在这里插入图片描述

方形裤子的黄方块

关注

10
点赞
踩
15

收藏

觉得还不错? 一键收藏
6
评论
javaScript如何实现点击Top回到顶部，与带动画过渡效果

javaScript如何实现点击Top回到顶部例子：css代码 <style> body{ height: 3500px; font-size: 40px; } #ceshi{ position: fixed; right: 0; bottom: 140px; width: 200px;
复制链接

扫一扫

专栏目录