大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
需求:当滚动条到一定位置时侧边栏固定在某个位置,再往下滑动到某一位置时显示回到顶部按钮。点击按钮后页面会动态滑到顶部,速度由快到慢向上滑。
成都创新互联公司客户idc服务中心,提供成都温江机房、成都服务器、成都主机托管、成都双线服务器等业务的一站式服务。通过各地的服务中心,我们向成都用户提供优质廉价的产品以及开放、透明、稳定、高性价比的服务,资深网络工程师在机房提供7*24小时标准级技术保障。
思路:
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(); }
详细代码如下:
返回顶部效果 返回顶部头部区域主体部分
以上就是JavaScript仿淘宝回到顶部效果(代码示例)的详细内容,更多请关注创新互联其它相关文章!