Shulou(Shulou.com)06/03 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.