“回到顶部”的用法

最新推荐文章于 2024-08-06 18:49:35 发布

就今天去

最新推荐文章于 2024-08-06 18:49:35 发布

阅读量625

点赞数

文章标签： javascript css3

本文链接：https://blog.csdn.net/m0_56047670/article/details/122283478

版权

原理：

1、根据网页的滚动高度，判断是否显示回到顶部按钮

2、点击按钮时，触发回到顶部事件，追求视觉效果的话，可以加入一个定时器

简单版本的：

代码：

<!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>回到顶部简版</title>
    <style>
        .overflow_hide {
            height: 1000px;
            margin-top: 200px;
            text-align: center;
        }
        a {
            bottom: 0;
        }
    </style>
</head>

<body>
    <div class="overflow_hide">
        <p>如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。</p>
        
    </div>
    <a href="#" >返回页面顶部</a>
</body>

</html>

直接在底部点击就会自动跳转到顶部了，