前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JavaScript案例:带动画的返回顶部

JavaScript案例:带动画的返回顶部

作者头像
岳泽以
发布2022-10-26 17:28:13
7600
发布2022-10-26 17:28:13
举报
文章被收录于专栏:岳泽以博客岳泽以博客

案例分析:

  1. 带有动画的返回顶部
  2. 继续使用我们封装的动画
  3. 只需要把所有的left相关值改为跟页面垂直滚动距离相关就可以
  4. 页面滚动了多少,可以通过 window.pageYOffset得到
  5. 最后是页面滚动,使用window.scroll(x,y)

JavaScript——动画函数封装

核心原理:通过定时器setInterval()不断移动盒子位置。实现步骤:获得盒子当前位置让盒子在当前位置加上1个...

将以下代码添加到淘宝侧边栏案例中:

JavaScript案例:仿淘宝侧边栏

案例分析原先侧边栏是绝对定位当页面滚动到一定位置,侧边栏改为固定定位页面继续滚动,会让返回顶部显示出来。代码:&l...

代码语言:javascript
复制
 //当我们点击了返回顶部模块,就让窗口滚动到页面最上方。
        goBack.addEventListener('click', function () {
            // window.scroll(0, 0);
            animate(window, 0);
        });
        //动画函数
        function animate(obj, target, 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);
                    //如果有这个参数就调用这个函数
                    if (callback) {
                        callback();
                    }
                }
                //obj.style.left = window.pageYOffset + step + "px";
                window.scroll(0, window.pageYOffset + step)
            }, 15);
        }
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2022 年 09 月,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 案例分析:
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档