JS 仿淘宝固定右侧侧边栏(可返回顶部)案例

background-color: purple;

}

.ba

真题解析、进阶学习笔记、最新讲解视频、实战项目源码、学习路线大纲
详情关注公中号【编程进阶路】

nner {

height: 250px;

background-color: skyblue;

}

.main {

height: 1000px;

background-color: yellowgreen;

}

span {

display: none;

position: absolute;

bottom: 0;

}

返回顶部

头部区域

banner区域

主体部分

到这里我们就完成了固定侧边栏的部分，完成效果：

但是我们还想在单击返回顶部时可以丝滑的滑到顶部，应该怎么做呢？

返回顶部

===================================================================

滚动窗口至文档中的特定位置：

window.scroll(x,y) //里面的x,y不加单位

所以我们在单击返回顶部时来个window.scroll(0,0)就行了，但是我们想慢慢滚动带有动画的返回顶部，应该怎么做呢？

我们之前封装过一个缓动动画函数，只不过是左右移动的，所以只要稍加修改就能用了

加上缓动动画的效果：

示例代码：

goBack.addEventListener(‘click’, function() {

// 里面的x和y 不跟单位的 直接写数字即可

// window.scroll(0, 0);

// 因为是窗口滚动 所以对象是window

animate(window, 0);

});

// 动画函数

function animate(obj, target, callback) {

// console.log(callback); callback = function() {} 调用的时候 callback()

// 先清除以前的定时器，只保留当前的一个定时器执行

clearInterval(obj.timer);

obj.timer = setInterval(function() {

// 步长值写到定时器的里面

对象篇

模块化编程-自研模块加载器