（11）页面带动画的返回顶部

最新推荐文章于 2023-09-27 19:53:10 发布

superfortunate

最新推荐文章于 2023-09-27 19:53:10 发布

阅读量467

点赞数

分类专栏： JavaScript知识点详细学习笔记文章标签：前端 javascript

本文链接：https://blog.csdn.net/weixin_59598992/article/details/122749045

版权

本文介绍了如何利用JavaScript实现页面返回顶部并带有缓动动画的效果。通过修改之前封装的缓动函数，将left值替换为页面垂直滚动距离，结合window.pageYOffset获取页面滚动位置，从而实现平滑滚动回到顶部的功能。祝你学习愉快！

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

滚动窗口到文档中的特定位置。window.scroll( x , y)

带动画的返回顶部则继续使用前面封装的缓动动画函数
只需要把前面函数里所有left相关的值改为页面垂直滚动距离相关就可以了
页面滚动了多少，可以通过window.pageYOffset得到

  //返回顶部
    var top = document.querySelector('.guding');
    top.addEventListener('click', function() {
        //window.scroll(0, 0);
        //窗口滚动
        animate_1(window, 0);
    })
    //动画函数
    function animate_1(obj, target, callback) {
        // console.log(callback);  callback = function() {}  调用的时候 callback()
    
        // 先清除以前的定时器，只保留当前的一个定时器执行
        clearInterval(obj.timer);
        obj.timer = setInterval(function() {

            var step = (target - window.pageYOffset) / 10;
            
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            if (window.pageYOffset == target) {
                // 停止动画 本质是停止定时器
                clearInterval(obj.timer);