楼梯导航
<!DOCTYPE html>
<html lang="zh-cn"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>滚动到展示区</title><link rel="stylesheet" href="css/reset.css"><style>.box {height: 400px;background-color: #368;margin: 10px;text-align: center;line-height: 400px;font-size: 80px;font-weight: 900;color: #fff;}.slide-nav {position: fixed;top: 300px;right: 0;height: 500px;width: 45px;background-color: #222;color: #fff;}.slide-nav li {font-size: 20px;line-height: 80px;text-align: center;border-bottom: 1px solid #fff;cursor: pointer;user-select: none;}</style>
</head><body><div class="box">1</div><div class="box">2</div><div class="box">3</div><div class="box">4</div><div class="box">5</div><div class="box">6</div><ul class="slide-nav"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul><script src="js/common.js"></script><script>var oNav = $('.slide-nav')var aBox = $$('.box')var timeroNav.addEventListener('click', function (e) {if(e.target.tagName.toLowerCase() === 'li') {scrollMove(aBox[e.target.innerText - 1], false)}}, false)function scrollMove(ele, isTop) {var speed = 10var targetTop = ele.offsetTopvar scrollTopisTop ?? trueif(!isTop) {targetTop = (window.innerHeight - ele.offsetHeight) / 2 + ele.offsetTop}clearInterval(timer)timer = setInterval(function () { var scrollTop = document.documentElement.scrollTop; speed = (targetTop - scrollTop) / 10if(Math.abs(scrollTop - targetTop) < 10) {clearInterval(timer)document.documentElement.scrollTop = targetTopreturn false}document.documentElement.scrollTop = scrollTop + speed}, 1000 / 10)}</script>
</body></html>
