js實現(xiàn)樓層滾動效果
更新時間：2021年09月23日 09:08:49 作者：一個學(xué)前端的小菜鳥
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)樓層滾動效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了jquery實現(xiàn)滑動樓梯效果，實現(xiàn)樓層的滾動以及點擊樓層按鈕跳轉(zhuǎn)到對應(yīng)的樓層，代碼如下
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時，直接設(shè)置偏移量為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) {
// 滾動的樓層到達(dá)頂部范圍，離開消失
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'); //導(dǎo)航殼
var aNav = oNav.find('li'); //導(dǎo)航
var aDiv = $('#main .louceng'); //樓層
var oTop = $('#goTop'); //回到頂部
$(window).scroll(function() {
//可視窗口高度
var winH = $(window).height();
//鼠標(biāo)滾動的距離
var iTop = $(window).scrollTop();
if(iTop >= $("#header").height()) {
oNav.fadeIn();
oTop.fadeIn();
//鼠標(biāo)滑動樣式改變
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();
}
})
//點擊回到當(dāng)前樓層
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>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
js操作CheckBoxList實現(xiàn)全選/反選(在客服端完成)
對于CheckBoxList控件來說，一方面要實現(xiàn)大量數(shù)據(jù)在服務(wù)器端的綁定工作，另一方面往往要求實現(xiàn)全選、反選等功能,接下來將介紹js操作CheckBoxList實現(xiàn)全選/反選，感興趣的朋友可以了解下，或許對你有所幫助2013-02-02
這篇文章主要介紹了Javascript原型鏈的原理,結(jié)合實例形式深入分析了JavaScript原型鏈的原理與使用技巧,需要的朋友可以參考下2016-01-01
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)移動端輪播效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
下面小編就為大家?guī)硪黄猣orm表單轉(zhuǎn)Json提交的方法(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09
JavaScript設(shè)計模式--簡單工廠模式實例分析【XHR工廠案例】
這篇文章主要介紹了JavaScript設(shè)計模式--簡單工廠模式,結(jié)合實例形式分析了JavaScript設(shè)計模式中簡單工廠模式原理與XHR工廠應(yīng)用案例,需要的朋友可以參考下2020-05-05
這篇文章主要介紹了4種滾動吸頂實現(xiàn)方式的比較，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要為大家詳細(xì)介紹了微信小程序頂部導(dǎo)航欄滑動tab效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-01-01
這篇文章主要介紹了微信小程序自定義toast的實現(xiàn)代碼,本文以toast為例通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2018-11-11
本文主要介紹了JavaScript中this的指向問題。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
微信公眾號-獲取用戶信息（網(wǎng)頁授權(quán)獲取）實現(xiàn)步驟
這篇文章主要介紹了微信公眾號-獲取用戶信息（網(wǎng)頁授權(quán)獲?。崿F(xiàn)步驟的相關(guān)資料,需要的朋友可以參考下2016-10-10