How to achieve floor scrolling effect with js

Editor to share with you how to achieve the floor scrolling effect of js, I hope you will gain something after reading this article, let's discuss it together!

Html Code:

Meaningless text layer 1, layer 2, layer 3, layer 4, 1F 2F 3F 4F

Css Code:

* {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 Code:

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) {/ / scroll bar move up 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 scrollTop && scrollTop >

V.offsetTop) {/ / the scrolling floor reaches the top range and leaves the vanishing lis.classList.add ("active")} else {lis.classList.remove ("active")})}

The editor shares another piece of code for you: jquery floor scrolling special effect.

Jq floor scrolling effect * {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 } 1F clothing 2F Beauty make-up 3F Mobile phone 4F Home Appliances I am the QR code Top head dress beauty phone Home appliances var oNav = $('# LoutiNav') / / Navigation housing var aNav = oNav.find ('li'); / / Navigation var aDiv = $(' # main. Louceng'); / / floor var oTop = $('# goTop') / / back to the top $(window) .height (function () {/ / visible window height var winH = $(window) .height (); / / the distance the mouse scrolls var iTop = $(window) .scrollTop () If (iTop > = $("# header") .height () {oNav.fadeIn (); oTop.fadeIn () / / change 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 () }}) / / Click to return to the current floor aNav.click (function () {var t = aDiv.eq ($(this). Index ()). Offset (). Top; $('body,html'). Animate ({"scrollTop": t}, 500) $(this) .addClass ('active'). Siblings (). RemoveClass (' active');}) / / back to the top oTop.click (function () {$('body,html'). Animate ({"scrollTop": 0}, 500)}) after reading this article, I believe you have some understanding of "how js achieves floor scrolling". If you want to know more related knowledge, welcome to follow the industry information channel, thank you for reading!