登录  /  注册
首页 > web前端 > js教程 > 正文

JavaScript仿淘宝回到顶部效果(代码示例)

青灯夜游
发布: 2019-11-30 17:10:37
转载
2493人浏览过

本篇文章给大家带来的内容是javascript仿淘宝回到顶部效果(代码示例)。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

JavaScript仿淘宝回到顶部效果(代码示例)

需求:当滚动条到一定位置时侧边栏固定在某个位置,再往下滑动到某一位置时显示回到顶部按钮。点击按钮后页面会动态滑到顶部,速度由快到慢向上滑。

思路:

1、页面加载完毕才能执行js代码

  可以将js代码写在最下边(本次回顶示例是用的这种)

  想写在上边可以用下边这两种:

      ①window.onload = function() {...}

   ②window.addEventListener('load', function() {...})

2、获取需要用到的元素

3、绑定滚动事件 scroll

当用户滚到banner模块时使侧边栏变为固定状态

if(window.pageYOffset >= bannerTop) {    // window.pageYOffset 屏幕被滚上去的距离
    sliderbar.style.position = 'fixed';   // 当用户滚到banner模块时使侧边栏变为固定状态
    sliderbar.style.top = sliderbarTop + 'px'; 
} else {
    sliderbar.style.position = 'absolute';
    sliderbar.style.top = '300px';
}
登录后复制

当用户滚到main模块时显示返回顶部按钮

 if(window.pageYOffset >= mainTop) {    // 当用户滚到main模块时显示返回顶部按钮
     goBack.style.display = 'block';
 } else {
     goBack.style.display = 'none';
 }
登录后复制

4、绑定点击事件 click

点击返回顶部按钮后页面会动态滑到顶部,速度由快到慢向上滑动

 sliderbar.addEventListener('click', function() {
     animate(window, 0);
 })
登录后复制

5、关于动画函数 animate(obj, target, callback) 

这里obj对象即是window;target目标位置即是0;callback是回调函数,没传参的话就可以忽略

设置一个定时器  setInterval();

声明一个step作为步长值,值为顶部位置到当前滚动条位置之差除以10(step会越来越小,滚动速度也就越来越慢,实现了滚动条的速度由快到慢的滑上去)

var step = (target - window.pageYOffset) / 10;
登录后复制

然而step并不总是整数,当step不是整数时可以让滚动条再往前走一丢丢。滚动条可以上下滑动,所以step可能大于零也可能小于零。大于零向上取整,小于零向下取整

step = step > 0 ? Math.ceil(step) : Math.floor(step);
登录后复制

window.scroll(x, y) 滚动到文档特定位置,定时器每次调用函数都会往上滑一点

window.scroll(0, window.pageYOffset + step);
登录后复制

判断动画是否执行完毕,如果执行完毕则关闭定时器  clearInterval();

if(window.pageYOffset == target) {  // 当页面回到顶部后(即动画执行完) 清除定时器
    clearInterval(obj.timer);
    //  判断是否传了回调函数
    /* if(callback) { 
        callback();
    } */
    // 可以简写为下边这种。 &&是短路运算符,存在callback(即第一个式子为true)时才会继续执行callback()
    callback && callback();
}
登录后复制

详细代码如下:

nbsp;html>


    <meta>
    <meta>
    <meta>
    <title>返回顶部效果</title>
    <style>
        .slider-bar {
            position: absolute;
            left: 47%;
            top: 300px;
            margin-left: 600px;
            width: 45px;
            height: 130px;
            background-color: pink;
            cursor: pointer;
        }
        .w {
            width: 1100px;
            margin: 10px auto;
        }
        .header {
            height: 150px;
            background-color: purple;
        }
        .banner {
            height: 250px;
            background-color: skyblue;
        }
        .main {
            height: 1000px;
            background-color: yellowgreen;
        }
        span {
            display: none;
            position: absolute;
            bottom: 0;
        }
    </style>
    <div>
        <span>返回顶部</span>
    </div>
    <div>头部区域</div>
    <div>banner区域</div>
    <div>主体部分</div>

    <script>
        // querySelector() 方法返回匹配指定选择器()的第一个元素,传的必须是字符串
        var sliderbar = document.querySelector(&#39;.slider-bar&#39;);
        var banner = document.querySelector(&#39;.banner&#39;);
        var bannerTop = banner.offsetTop; // banner模块距离顶部的长度
        var sliderbarTop = sliderbar.offsetTop - bannerTop; // 侧边栏固定后距离顶部的长度

        var main = document.querySelector(&#39;.main&#39;);
        var goBack = document.querySelector(&#39;.goBack&#39;);
        var mainTop = main.offsetTop;  // main模块距离顶部的长度
        
        // scroll 屏幕发生滚动事件时执行
        document.addEventListener(&#39;scroll&#39;, function() {
            if(window.pageYOffset >= bannerTop) {    // window.pageYOffset 屏幕被滚上去的距离
                sliderbar.style.position = &#39;fixed&#39;;   // 当用户滚到banner模块时使侧边栏变为固定状态
                sliderbar.style.top = sliderbarTop + &#39;px&#39;; 
            } else {
                sliderbar.style.position = &#39;absolute&#39;;
                sliderbar.style.top = &#39;300px&#39;;
            }
            
            if(window.pageYOffset >= mainTop) {    // 当用户滚到main模块时显示返回顶部按钮
                goBack.style.display = &#39;block&#39;;
            } else {
                goBack.style.display = &#39;none&#39;;
            }
            
        });
        sliderbar.addEventListener(&#39;click&#39;, function() {
            animate(window, 0);
        })

        /* 动画函数:
         *  obj 做动画的对象(这里就是指window)
         *  target 目标位置(顶部)
         *  callback 回调函数(没有传参的话就不执行)
         */
        function animate(obj, target, callback) {
            clearInterval(obj.timer);  // 先清除定时器,保证只有一个定时器在执行,以免出现bug
            obj.timer = setInterval(function() {
                // window.pageYOffset距离顶部的距离(是负的)
                var step = (target - window.pageYOffset) / 10;  // step步长(让页面速度逐渐变慢的滑动上去)
                step = step > 0 ? Math.ceil(step) : Math.floor(step); // step并不总是整数。大于零向上取整,小于零向下取整
                if(window.pageYOffset == target) {  // 当页面回到顶部后(即动画执行完) 清除定时器
                    clearInterval(obj.timer);
                    //  判断是否传了回调函数
                    /* if(callback) { 
                        callback();
                    } */
                    // 可以简写为下边这种。 &&是短路运算符,存在callback(即第一个式子为true)时才会继续执行callback()
                    callback && callback();
                }
                // window.scroll(x, y) 滚动到文档特定位置
                window.scroll(0, window.pageYOffset + step);
            }, 15);
        }
    </script>
登录后复制

 更多炫酷javascript特效代码,尽在:js特效大全

以上就是JavaScript仿淘宝回到顶部效果(代码示例)的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:cnblogs网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号