js實(shí)現(xiàn)樓層滾動(dòng)效果

更新時(shí)間：2021年09月23日 09:08:49 作者：一個(gè)學(xué)前端的小菜鳥

這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)樓層滾動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了jquery實(shí)現(xiàn)滑動(dòng)樓梯效果，實(shí)現(xiàn)樓層的滾動(dòng)以及點(diǎn)擊樓層按鈕跳轉(zhuǎn)到對(duì)應(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) {
                //頁面的偏移量，原來的頁面滾動(dòng)的距離
                var scrollTop = document.documentElement.scrollTop
                var offsetTop = layers[i].offsetTop
                if (scrollTop > offsetTop) {
                    // 滾動(dòng)條向上移動(dòng)
                    var timer = setInterval(function () {
                        if (scrollTop > offsetTop) {
                            scrollTop -= 40
                            if (scrollTop - offsetTop < 40) {
                                // 如果最后一洞的距離小于40時(shí)，直接設(shè)置偏移量為0
                                window.scrollTo(0, offsetTop)
                            } else {
                                window.scrollTo(0, scrollTop)
                            }
                        } else {
                            clearInterval(timer)
                        }
                    }, 50)
                } else {
                    // 滾動(dòng)條向下移動(dòng)
                    // 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òng)的樓層到達(dá)頂部范圍，離開消失
                    lis[i].classList.add("active")
                } else {
                    lis[i].classList.remove("active")
                }
            })
 
        }
 
</script>

小編再為大家分享一段代碼：jquery樓層滾動(dòng)特效

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>jq 樓層滾動(dòng)效果</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>手機(jī)</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;">手機(jī)</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)滾動(dòng)的距離
                    var iTop = $(window).scrollTop();

                    if(iTop >= $("#header").height()) {
                        oNav.fadeIn();
                        oTop.fadeIn();
                        //鼠標(biāo)滑動(dòng)樣式改變
                        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();
                    }
                })
            //點(diǎn)擊回到當(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)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: