<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
li {
list-style: none;
}
#box {
position: fixed;
left: 0;
top: 50%;
transform: translateY(-50%);
background: chartreuse;
}
#box li {
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
border-bottom: 1px solid red;
font-size: 20px;
}
#main {
font-size: 100px;
color: #fff;
}
#main #chi {
height: 500px;
background: green;
}
#main #he {
height: 300px;
background: pink;
}
#main #wan {
height: 400px;
background: burlywood;
}
#main #le {
height: 800px;
background: darkgrey;
}
</style>
</head>
<body>
<div id="box">
<ul id="boxList">
<li>吃</li>
<li>喝</li>
<li>玩</li>
<li>乐</li>
</ul>
</div>
<div id="main">
<div id="chi">吃</div>
<div id="he">喝</div>
<div id="wan">玩</div>
<div id="le">乐</div>
</div>
<script>
var box = document.getElementById('box');
var boxli = box.getElementsByTagName('li');
var main = document.getElementById('main');
var adiv = main.getElementsByTagName('div');
var timer = null;
for (var i = 0; i < boxli.length; i++) {
boxli[i].index = i;
boxli[i].onclick = function () {
var myoffset = adiv[this.index].offsetTop;
var step = 18;
window.clearInterval(timer);
timer = window.setInterval(function () {
var curtop = document.documentElement.scrollTop || document.body.scrollTop;
if (curtop >= myoffset) {
curtop -= step;
if (curtop <= myoffset) {
curtop = myoffset;
clearInterval(timer);
document.documentElement.scrollTop = curtop;
document.body.scrollTop = curtop;
}
document.documentElement.scrollTop = curtop;
document.body.scrollTop = curtop;
} else {
curtop += step;
if (curtop>=myoffset) {
curtop=myoffset;
clearInterval(timer);
document.documentElement.scrollTop = curtop;
document.body.scrollTop = curtop;
}
document.documentElement.scrollTop = curtop;
document.body.scrollTop = curtop;
}
}, 20);
};
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
li {
list-style: none;
}
#box {
position: fixed;
left: 0;
top: 50%;
transform: translateY(-50%);
background: chartreuse;
z-index: 10;
}
#box li {
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
border-bottom: 1px solid red;
font-size: 20px;
}
#main {
font-size: 100px;
color: #fff;
position: relative;
}
#main #chi {
height: 500px;
background: green;
}
#main #he {
height: 300px;
background: pink;
}
#main #wan {
height: 400px;
background: burlywood;
}
#main #le {
height: 800px;
background: darkgrey;
}
#box .bg {
background: red;
}
</style>
</head>
<body>
<div id="box">
<ul id="boxList">
<li class="bg">吃</li>
<li>喝</li>
<li>玩</li>
<li>乐</li>
</ul>
</div>
<div id="main">
<div id="chi">吃</div>
<div id="he">喝</div>
<div id="wan">玩</div>
<div id="le">乐</div>
</div>
<script>
window.onscroll = myscroll;
var box = document.getElementById('box');
var boxli = box.getElementsByTagName('li');
var main = document.getElementById('main');
var adiv = main.getElementsByTagName('div');
var chi = document.getElementById('chi');
var he = document.getElementById('he');
var wan = document.getElementById('wan');
var le = document.getElementById('le');
var timer = null;
for (var i = 0; i < boxli.length; i++) {
boxli[i].index = i;
boxli[i].onclick = function () {
window.onscroll = null;
for (var i = 0; i < boxli.length; i++) {
boxli[i].className = '';
}
this.className = 'bg';
myoffset = adiv[this.index].offsetTop;
var step = 18;
window.clearInterval(timer);
timer = window.setInterval(function () {
var curtop = document.documentElement.scrollTop || document.body.scrollTop;
if (curtop >= myoffset) {
curtop -= step;
if (curtop <= myoffset) {
curtop = myoffset;
clearInterval(timer);
window.onscroll = myscroll;
document.documentElement.scrollTop = curtop;
document.body.scrollTop = curtop;
}
document.documentElement.scrollTop = curtop;
document.body.scrollTop = curtop;
} else {
curtop += step;
if (curtop >= myoffset) {
curtop = myoffset;
clearInterval(timer);
window.onscroll = myscroll;
document.documentElement.scrollTop = curtop;
document.body.scrollTop = curtop;
}
document.documentElement.scrollTop = curtop;
document.body.scrollTop = curtop;
}
}, 20);
};
}
function myscroll() {
var curtop = document.documentElement.scrollTop || document.body.scrollTop;
fn(curtop, chi, boxli[0]);
fn(curtop, he, boxli[1]);
fn(curtop, wan, boxli[2]);
fn(curtop, le, boxli[3]);
}
function fn(curtop, obj, mybox) {
if (curtop >= obj.offsetTop) {
for (var i = 0; i < boxli.length; i++) {
boxli[i].className = '';
}
mybox.className = 'bg';
}
}
</script>
</body>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
