js回到顶部

举报
江一铭的博客 发表于 2021/11/23 00:31:21 2021/11/23
【摘要】 回到顶部 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...

回到顶部

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div {
        width: 300px;
        height: 800px;
        background: linear-gradient(#FFF, #f45, #f67);
    }

    button {
        position: fixed;
        bottom: 10px;
    }
</style>

<body>
    <div>
        <button id="but">回到顶部</button>
    </div>

    <script>
        document.getElementById('but').onclick = function () {
            document.body.scrollTop = 0;
            document.documentElement.scrollTop = 0;
        }
    </script>
</body>

</html>

  
 

文章来源: jiangwenxin.blog.csdn.net,作者:前端江太公,版权归原作者所有,如需转载,请联系作者。

原文链接:jiangwenxin.blog.csdn.net/article/details/121292493

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。