| 本文实例为大家分享了jquery实现滑动楼梯效果，实现楼层的滚动以及点击楼层按钮跳转到对应的楼层，代码如下 html代码： <div style="height: 500px; background-color: black; color: #fff;">无意义的文本</div> <div class="layerbox"> <div class="layer num1">第一层</div> <div class="layer num2">第二层</div> <div class="layer num3">第三层</div> <div class="layer num4">第四层</div> </div> <div class="nav"> <ul> <li>1F</li> <li>2F</li> <li>3F</li> <li>4F</li> </ul></div> css代码： * { margin: 0; padding: 0; } .layer { height: 300px; font-size: 80px; color: white; text-align: center; } .num1 { background-color: red; } .num2 { background-color: blue; } .num3 { background-color: yellow; } .num4 { background-color: green; } .nav { position: fixed; right: 50px; bottom: 400px; background-color: pink; } ul { list-style: none; } ul li { padding: 10px; width: 50px; height: 50px; line-height: 50px; text-align: center; border: 1px solid #000; } ul li.active { background-color: crimson; }js代码： <script> var layers = document.querySelectorAll(".layer") var lis = document.querySelectorAll('li') for (let i = 0; i < lis.length; i++) { const li = lis[i] li.onclick = function (e) { //页面的偏移量，原来的页面滚动的距离 var scrollTop = document.documentElement.scrollTop var offsetTop = layers[i].offsetTop if (scrollTop > offsetTop) { // 滚动条向上移动 var timer = setInterval(function () { if (scrollTop > offsetTop) { scrollTop -= 40 if (scrollTop - offsetTop < 40) { // 如果最后一洞的距离小于40时，直接设置偏移量为0 window.scrollTo(0, offsetTop) } else { window.scrollTo(0, scrollTop) } } else { clearInterval(timer) } }, 50) } else { // 滚动条向下移动 // scrollTop <= offsetTop var timer = setInterval(function () { if (scrollTop < offsetTop) { scrollTop += 40 if (offsetTop - scrollTop < 40) { window.scrollTo(0, offsetTop) } else { window.scrollTo(0, scrollTop) } } else { clearInterval(timer) } }, 50); } } } window.onscroll = function (e) { var scrollTop = document.documentElement.scrollTop || document.body.scrollTop layers.forEach(function (v, i) { if (v.clientHeight + v.offsetTop > scrollTop && scrollTop > v.offsetTop) { // 滚动的楼层到达顶部范围，离开消失 lis[i].classList.add("active") } else { lis[i].classList.remove("active") } }) } </script>小编再为大家分享一段代码：jquery楼层滚动特效 <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>jq 楼层滚动效果</title> <style> * { margin: 0; padding: 0; } i { font-style: normal; } ul, li, dl, ol{ list-style: none; } #LoutiNav { border: 1px solid gray; width: 30px; position: fixed; top: 150px; left: 50px; display: none; } #LoutiNav li { width: 30px; height: 30px; border-bottom: 1px solid gray; line-height: 30px; text-align: center; cursor: pointer; } #LoutiNav span { display: none; } #LoutiNav .active { background: white; color: darkred; } #LoutiNav li:hover span { display: block; font-size: 12px; background: darkred; color: white; } #LoutiNav li:hover i { display: none; } #goTop { width: 40px; height: 40px; line-height: 40px; text-align: center; background: gray; position: fixed; bottom: 30px; right: 30px; cursor: pointer; border-radius: 5px; display: none; } #goTop:hover { background: darkred; color: white; } #goTop:hover span { display: block; } #erweima { width: 130px; height: 130px; background: palegreen; display: none; position: absolute; right: 46px; bottom: 5px; line-height: 130px; text-align: center; font-size: 20px; border-radius: 10px; } #header { height: 200px; background: palegoldenrod; text-align: center; line-height: 200px; font-size: 72px; margin: 0 auto; } .louceng { height: 810px; text-align: center; line-height: 610px; font-size: 120px; margin: 0 auto; } </style> <script src="js/jquery-1.7.2.min.js"></script> </head> <body> <ul id="LoutiNav"> <li class="active"><i>1F</i><span>服饰</span></li> <li><i>2F</i><span>美妆</span></li> <li><i>3F</i><span>手机</span></li> <li style="border-bottom: none;"><i>4F</i><span>家电</span></li> </ul> <div id="goTop"> <span id="erweima">我是二维码</span> Top </div> <div id="header">头部</div> <div id="main"> <div class="louceng" style="background: papayawhip;">服饰</div> <div class="louceng" style="background: peachpuff;">美妆</div> <div class="louceng" style="background: peru;">手机</div> <div class="louceng" style="background: pink;">家电</div> </div> <script> var oNav = $('#LoutiNav'); //导航壳 var aNav = oNav.find('li'); //导航 var aDiv = $('#main .louceng'); //楼层 var oTop = $('#goTop'); //回到顶部 $(window).scroll(function() { //可视窗口高度 var winH = $(window).height(); //鼠标滚动的距离 var iTop = $(window).scrollTop(); if(iTop >= $("#header").height()) { oNav.fadeIn(); oTop.fadeIn(); //鼠标滑动样式改变 aDiv.each(function() { if(winH + iTop - $(this).offset().top > winH / 2) { aNav.removeClass('active'); aNav.eq($(this).index()).addClass('active'); } }) } else { oNav.fadeOut(); oTop.fadeOut(); } }) //点击回到当前楼层 aNav.click(function() { var t = aDiv.eq($(this).index()).offset().top; $('body,html').animate({ "scrollTop": t }, 500); $(this).addClass('active').siblings().removeClass('active'); }); //回到顶部 oTop.click(function() { $('body,html').animate({ "scrollTop": 0 }, 500) }) </script> </body></html>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持51zixue.net。
下载地址:
常用的JavaScript数组方法
js实现简单的拖拽效果 |
