元素滚动scroll+动画函数封装 —— 返回顶部

最新推荐文章于 2022-04-24 14:18:47 发布

没人回复我哼

最新推荐文章于 2022-04-24 14:18:47 发布

阅读量182

点赞数

文章标签： js javascript

本文链接：https://blog.csdn.net/qq_45645902/article/details/105915864

版权

本文介绍了如何使用JavaScript封装一个带有动画效果的返回顶部功能。通过window.pageYOffset获取页面滚动距离，并利用封装的动画函数实现平滑滚动效果。当点击返回顶部按钮时，页面将平滑滚动到顶部。

摘要由CSDN通过智能技术生成

学习来源：https://www.bilibili.com/video/BV1HJ41147DG

要求
带有动画的返回顶部

在这里插入图片描述

思路

此时可以继续使用我们封装的动画函数
只需要把所有的left 相关的值改为跟页面垂直滚动距离相关就可以了
页面滚动了多少，可以通过 window.pageYOffset 得到
最后是页面滚动，使用 window.scroll(x,y)

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .slider-bar {
   
            position: absolute;
            left: 50%;
            top: 800px;
            margin-left: 600px;
            width: 45px;
            height: 130px;
            background-color: red;
            text-align: center;
        }

        .com {
   
            width: 1200px;
            margin: 10px auto;