189 8069 5689

JavaScript实现回到顶部功能

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

成都创新互联公司客户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仿淘宝回到顶部效果（代码示例）的详细内容，更多请关注创新互联其它相关文章！


分享题目：JavaScript实现回到顶部功能
标题路径：http://cdxtjz.cn/article/pcgdhd.html

其他资讯