欢迎来到站长教程网!

JavaScript

当前位置:主页 > 网页制作 > JavaScript >

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

时间:2020-05-20|栏目:JavaScript|点击:

本篇文章给大家带来的内容是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特效代码,尽在:js特效大全

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

上一篇:canvas绘制工作流之绘制节点

栏    目:JavaScript

下一篇:详解DOM事件流的三个阶段

本文标题:JavaScript仿淘宝回到顶部效果(代码示例)

本文地址:http://www.blue1000.com/wangyezhizuo/JavaScript/1282.html

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:1961407250 | 邮箱:1961407250#qq.com(#换成@)

Copyright © 2002-2022 BK网络学院版权所有 Power by DedeCms 粤ICP备19027147号-7