如何用JavaScript实现网页楼层跳转功能？

本文共计539个文字，预计阅读时间需要3分钟。

原文示例代码如下：

* { margin: 0; padding: 0;}, body { width: 100%; height: 100%;}ul { width: 100%; height: 100%;}ulli { list-style: none;}

简化后的代码：

* { margin: 0; padding: 0; }, body { width: 100%; height: 100%; }ul { width: 100%; height: 100%; }ulli { list-style: none; }

本文实例为大家分享了JavaScript实现楼层效果的具体代码，供大家参考，具体内容如下

* { margin: 0; padding: 0; } html, body { width: 100%; height: 100%; } ul { width: 100%; height: 100%; } ul>li { list-style: none; width: 100%; height: 100%; font-size: 100px; text-align: center; } ol { position: fixed; left: 10px; top: 50%; transform: translateY(-50%); } ol>li { list-style: none; width: 100px; line-height: 40px; text-align: center; border: 1px solid #000; } .selected { background: skyblue; }

<ul> <li>我是第1层</li> <li>我是第2层</li> <li>我是第3层</li> <li>我是第4层</li> <li>我是第5层</li> </ul> <ol> <li class="selected">第1层</li> <li>第2层</li> <li>第3层</li> <li>第4层</li> <li>第5层</li> </ol>

js：

// 1.初始化楼层的颜色 let oPages = document.querySelectorAll("ul>li"); let colorArr = ['green', 'blue', 'purple', 'red', 'yellow']; for (let i = 0; i < oPages.length; i++) { let page = oPages[i]; page.style.background = colorArr[i]; } // 2.实现点击谁就选中谁 let oItems = document.querySelectorAll("ol>li"); let currentItem = oItems[0]; // 获取可视区域的高度 let screenHeight = getScreen().height; let timerId = null; for (let i = 0; i < oItems.length; i++) { let item = oItems[i]; item.onclick = function() { currentItem.className = ""; this.className = "selected"; currentItem = this; // 实现滚动 // window.scrollTo(0, i * screenHeight); // 注意点: 通过documentElement.scrollTop来实现网页滚动, 在设置值的时候不能添加单位 // document.documentElement.scrollTop = i * screenHeight + "px"; // document.documentElement.scrollTop = i * screenHeight; clearInterval(timerId); timerId = setInterval(function() { let begin = document.documentElement.scrollTop; let target = i * screenHeight; let step = (target - begin) * 0.2; begin += step; if (Math.abs(Math.floor(step)) <= 1) { clearInterval(timerId); document.documentElement.scrollTop = i * screenHeight; return; } document.documentElement.scrollTop = begin; }, 50); } } //获取浏览器视口宽高 function getScreen() { let width, height; if (window.innerWidth) { width = window.innerWidth; height = window.innerHeight; } else if (document.compatMode === "BackCompat") { width = document.body.clientWidth; height = document.body.clientHeight; } else { width = document.documentElement.clientWidth; height = document.documentElement.clientHeight; } return { width: width, height: height } }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。