我这里想添加一个效果，就是点击跳转到哪个楼层的时候，楼层之间也是有过渡效果的，并不是瞬间改变，用的是什么方法，能否解释下

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

* {

margin: 0;

padding: 0;

}

.content-part {

width: 1000px;

margin: 0px auto;

margin-bottom: 30px;

background-color: #ccc;

font-size: 50px;

}

.floornav {

position: fixed;

right: 40px;

top: 50%;

margin-top: -100px;

width: 120px;

height: 200px;

background-color: orange;

}

.floornav ul {

list-style: none;

}

.floornav ul li {

width: 120px;

height: 40px;

line-height: 40px;

text-align: center;

font-size: 26px;

/* 小手指针 */

cursor: pointer;

}

.floornav ul li.current {

background: purple;

color: white;

}

.info {

background: purple;

color: #fff;

}

</style>

</head>

<body>

</ul>

</nav>

科技栏目

</section>

体育栏目

</section>

新闻栏目

</section>

娱乐栏目

</section>

视频栏目

</section>

var list = document.getElementById("list");

var contentParts = document.querySelectorAll("section");

var newli = document.querySelectorAll("#list li");

var t = 0;

var timer;

list.onclick = function (e) {

var n = e.target.getAttribute("data-n");

var x = (document.querySelector('section[data-n=' + n + ']'));

document.documentElement.scrollTop = x.offsetTop;

}

var arr = [];

for (var i = 0; i < contentParts.length; i++) {

arr.push(contentParts[i].offsetTop);

}

arr.push(Infinity);

console.log(arr);

var nowfloor = -1;

window.onscroll = function () {

var scrollTop = document.documentElement.scrollTop + 1;

// console.log(scrollTop);

for (var i = 0; i < arr.length; i++) {

// console.log(arr[i]);

if (scrollTop >= arr[i] && scrollTop < arr[i + 1]) {

break;

}

if (nowfloor != i) {

console.log(i)

nowfloor = i;

for (var j = 0; j < newli.length; j++) {

if (j == i) {

newli[j].className = "info";

} else {

newli[j].className = "";

}

</script>

</body>

</html>

下载视频

能量咕噜略略 2021-10-14

源自：BOM基础 2-15 BOM特效开发（2）

收起

2回答

好帮手慕星星 2021-10-14 14:21:13

同学你好，看清楚老师第一次截图中代码位置，在list点击事件中加的定时器。而同学粘贴的代码中，定时器在点击事件外。

点击事件中定时器需要替换掉document.documentElement.scrollTop = x.offsetTop;这行代码，自己调整下位置。

收起回答

好帮手慕星星 2021-10-14 10:59:53

同学你好，如果想要楼层滚动效果，可以用定时器完成，参考：

分为向上滚动和向下滚动两个判断，基于两个楼层之间差值并不是成百整数，所以就1px的移动了，可能会慢一些。

自己测试下，祝学习愉快！

收起回答

提问者能量咕噜略略 #1

老师帮我看看为啥添上没效果呢

<script>
var list = document.getElementById("list");
var contentParts = document.querySelectorAll("section");
var newli = document.querySelectorAll("#list li");
var t = 0;
var timer;
timer = setInterval(function () {
if (document.documentElement.scrollTop <= x.offsetTop) {
document.documentElement.scrollTop++;
if (document.documentElement.scrollTop >= x.offsetTop) {
clearInterval(timer);
}
}
if (document.documentElement.scrollTop >= x.offsetTop) {
document.documentElement.scrollTop--;
if (document.documentElement.scrollTop <= x.offsetTop) {
clearInterval(timer);
}
}
}, 1);
list.onclick = function (e) {
var n = e.target.getAttribute("data-n");
var x = document.querySelector('section[data-n=' + n + ']');
document.documentElement.scrollTop = x.offsetTop;
}

var arr = [];
for (var i = 0; i < contentParts.length; i++) {
arr.push(contentParts[i].offsetTop);
}
arr.push(Infinity);
console.log(arr);
var nowfloor = -1;

window.onscroll = function () {
var scrollTop = document.documentElement.scrollTop + 1;
// console.log(scrollTop);
for (var i = 0; i < arr.length; i++) {
// console.log(arr[i]);
if (scrollTop >= arr[i] && scrollTop < arr[i + 1]) {
break;
}
}
if (nowfloor != i) {
console.log(i)
nowfloor = i;
for (var j = 0; j < newli.length; j++) {
if (j == i) {
newli[j].className = "info";
} else {
newli[j].className = "";
}
}
}
}

</script>

2021-10-14 11:42:27