移动端返回顶部

迈不过友情╰ 2023-09-26 11:19 49阅读 0赞

#### 文章目录 ####

*   *  一、案例分析
     *  二、代码实现
     *   *  1.HTML 文档
         *  2.CSS 文档
         *  3.JS 文档
     *  三、运行结果

### 一、案例分析 ###

① 头部搜索栏固定定位，这样滚动时不会将搜索栏也卷进去，并将z-index 层级设为最大；  
② 同 PC 端页面滚动一样，给 window 添加滚动事件；  
③ 先将 goback 的 display 设为 none 隐藏起来，当 window.pageYOffset 大于1000时，显示返回顶部模块，小于1000则隐藏；  
④ 点击返回顶部，页面就滚动到最开始的位置，我们可以 scroll(0, 0)，但是页面立马跳回原处会显得十分突兀，降低了用户体验；  
⑤ 对此，我们添加动画函数实现缓动效果，使页面相对缓慢地返回到最顶端。

### 二、代码实现 ###

#### 1.HTML 文档 ####

<!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>
        <link href="返回顶部.css" rel="stylesheet"/>
        <script src="返回顶部.js"></script>
    </head>
    <body>
        <div class="head">
            <input type="text" class="search" placeholder="  搜索"/>
            <div class="user"><a href="javascript:;">我的</a></div>
        </div>
        <div class="content">
            <ul class="picture">
                <li><a href="javascript:;"><img src="picture//图1.jpg"/></a></li>
                <li><a href="javascript:;"><img src="picture//图2.jpg"/></a></li>
                <li><a href="javascript:;"><img src="picture//图3.jpg"/></a></li>
                <li><a href="javascript:;"><img src="picture//图4.jpg"/></a></li>
                <li><a href="javascript:;"><img src="picture//图5.jpg"/></a></li>
                <li><a href="javascript:;"><img src="picture//图6.jpg"/></a></li>
            </ul>
        </div>
        <span class="goback"><img src="picture//顶部.png"/></span>
    </body>
    </html>

#### 2.CSS 文档 ####

* {
        
        margin: 0;
        padding: 0;
    }
    .head {
        
        position: fixed;
        width: 100%;
        height: 52px;
        top: 0;
        background-color: aliceblue;
        z-index: 999;
    }
    .search {
        
        position: absolute;
        width: 80%;
        height: 32px;
        margin: 10px;
        border: 1px solid #ccc;
    }
    .user {
        
        position: absolute;
        width: 42px;
        height: 42px;
        right: 10px;
        margin: 5px auto;
    }
    .head a {
        
        display: inline-block;
        width: 42px;
        height: 42px;
        text-decoration: none;
        font-size: 10px;
        text-align: center;
        line-height: 42px;
        color: aliceblue;
        border-radius: 50%;
        background-color: rgb(107, 107, 230);
    }
    .content {
        
        position: relative;
        width: 100%;
        height: 2400px;
        margin: 52px auto;
        overflow: hidden;
    }
    .picture {
        
        width: 100%;
        height: 2400px;
    }
    .picture img {
        
        width: 100%;
        height: 400px;
    }
    .goback {
        
        display: none;
        position: fixed;
        bottom: 50px;
        right: 10px;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        border: 2px solid #ccc;
        overflow: hidden;
        padding: 8px;
        background-color: aliceblue;
    }
    .goback img {
        
        width: 30px;
        height: 30px;
    }

#### 3.JS 文档 ####

### 三、运行结果 ###

![在这里插入图片描述][9c28143cc50a431b9d610de8532a5118.png_pic_center]  
![在这里插入图片描述][96b9e994b1044402b8fdf7c4e6857bf6.png_pic_center]

[9c28143cc50a431b9d610de8532a5118.png_pic_center]: https://img-blog.csdnimg.cn/9c28143cc50a431b9d610de8532a5118.png#pic_center
[96b9e994b1044402b8fdf7c4e6857bf6.png_pic_center]: https://img-blog.csdnimg.cn/96b9e994b1044402b8fdf7c4e6857bf6.png#pic_center