js realizes floor scrolling effect
- 2021-11-24 00:36:32
- OfStack
In this paper, we share the example of jquery to achieve the effect of sliding stairs, realize the scrolling of floors and click the floor button to jump to the corresponding floor. The code is as follows
html code:
<div style="height: 500px; background-color: black; color: #fff;"> A meaningless text </div>
<div class="layerbox">
<div class="layer num1"> No. 1 1 Layer </div>
<div class="layer num2"> No. 1 2 Layer </div>
<div class="layer num3"> No. 1 3 Layer </div>
<div class="layer num4"> No. 1 4 Layer </div>
</div>
<div class="nav">
<ul>
<li>1F</li>
<li>2F</li>
<li>3F</li>
<li>4F</li>
</ul>
</div>
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:
<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) {
// The offset of the page, the distance the original page scrolls
var scrollTop = document.documentElement.scrollTop
var offsetTop = layers[i].offsetTop
if (scrollTop > offsetTop) {
// The scroll bar moves up
var timer = setInterval(function () {
if (scrollTop > offsetTop) {
scrollTop -= 40
if (scrollTop - offsetTop < 40) {
// If in the end 1 The distance between the holes is less than 40 Set the offset directly to 0
window.scrollTo(0, offsetTop)
} else {
window.scrollTo(0, scrollTop)
}
} else {
clearInterval(timer)
}
}, 50)
} else {
// The scroll bar moves down
// 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) {
// Rolling floors reach the top range, leaving and disappearing
lis[i].classList.add("active")
} else {
lis[i].classList.remove("active")
}
})
}
</script>This site will share another code for you: jquery floor scrolling effects
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jq Floor rolling effect </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> Clothing </span></li>
<li><i>2F</i><span> Beauty makeup </span></li>
<li><i>3F</i><span> Mobile phone </span></li>
<li style="border-bottom: none;"><i>4F</i><span> Household appliances </span></li>
</ul>
<div id="goTop">
<span id="erweima"> I am 2 Dimension code </span> Top
</div>
<div id="header"> Head </div>
<div id="main">
<div class="louceng" style="background: papayawhip;"> Clothing </div>
<div class="louceng" style="background: peachpuff;"> Beauty makeup </div>
<div class="louceng" style="background: peru;"> Mobile phone </div>
<div class="louceng" style="background: pink;"> Household appliances </div>
</div>
<script>
var oNav = $('#LoutiNav'); // Navigation shell
var aNav = oNav.find('li'); // Navigation
var aDiv = $('#main .louceng'); // Floor
var oTop = $('#goTop'); // Back to the top
$(window).scroll(function() {
// Visual window height
var winH = $(window).height();
// The distance the mouse scrolls
var iTop = $(window).scrollTop();
if(iTop >= $("#header").height()) {
oNav.fadeIn();
oTop.fadeIn();
// Mouse sliding style 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)
})
</script>
</body>
</html>