温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

JavaScript怎么实现点击回到顶部效果

发布时间:2021-08-12 17:11:00 来源:亿速云 阅读:638 作者:chen 栏目:开发技术

这篇文章主要讲解了“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();}

详细代码如下:

<!DOCTYPE html><html><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>返回顶部效果</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></head><body>    <div>        <span>返回顶部</span>    </div>    <div class="header w">头部区域</div>    <div class="banner w">banner区域</div>    <div class="main w">主体部分</div>    <script>        // querySelector() 方法返回匹配指定选择器()的第一个元素,传的必须是字符串        var sliderbar = document.querySelector('.slider-bar');        var banner = document.querySelector('.banner');        var bannerTop = banner.offsetTop; // banner模块距离顶部的长度        var sliderbarTop = sliderbar.offsetTop - bannerTop; // 侧边栏固定后距离顶部的长度        var main = document.querySelector('.main');        var goBack = document.querySelector('.goBack');        var mainTop = main.offsetTop;  // main模块距离顶部的长度                // scroll 屏幕发生滚动事件时执行        document.addEventListener('scroll', function() {            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';            }                        if(window.pageYOffset >= mainTop) {    // 当用户滚到main模块时显示返回顶部按钮                goBack.style.display = 'block';            } else {                goBack.style.display = 'none';            }                    });        sliderbar.addEventListener('click', 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></body></html>

感谢各位的阅读,以上就是“JavaScript怎么实现点击回到顶部效果”的内容了,经过本文的学习后,相信大家对JavaScript怎么实现点击回到顶部效果这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI