js to achieve floor scrolling effect

This article uses jQuery to implement the sliding staircase effect, scroll the 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;">Meaningless text</div>
 
    <div class="layerbox">
        <div class="layer num1">Layer 1</div>
        <div class="layer num2">Layer 2</div>
        <div class="layer num3">The third layer</div>
        <div class="layer num4">Layer 4</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 page offset, the original page scroll distance var scrollTop = document.documentElement.scrollTop
                var offsetTop = layers[i].offsetTop
                if (scrollTop > offsetTop) {
                    // Scroll bar moves up var timer = setInterval(function () {
                        if (scrollTop > offsetTop) {
                            scrollTop -= 40
                            if (scrollTop - offsetTop < 40) {
                                // If the distance to the last hole is less than 40, set the offset to 0 directly
                                window.scrollTo(0, offsetTop)
                            } else {
                                window.scrollTo(0, scrollTop)
                            }
                        } else {
                            clearInterval(timer)
                        }
                    }, 50)
                } else {
                    // 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) {
                    // The scrolled floor reaches the top range and disappears lis[i].classList.add("active")
                } else {
                    lis[i].classList.remove("active")
                }
            })
 
        }
 
</script>

The editor will share with you another piece of code: jquery floor scrolling special effects

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>jq floor scrolling 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</span></li>
            <li><i>3F</i><span>Mobile phone</span></li>
            <li style="border-bottom: none;"><i>4F</i><span>Home appliances</span></li>
        </ul>
        <div id="goTop">
            <span id="erweima">I am a QR code</span> Top
        </div>
        <div id="header">Header</div>
        <div id="main">
            <div class="louceng" style="background: papayawhip;">Clothing</div>
            <div class="louceng" style="background: peachpuff;">Beauty</div>
            <div class="louceng" style="background: peru;">Mobile phone</div>
            <div class="louceng" style="background: pink;">Home 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 top $(window).scroll(function() {
                    //Visible window height var winH = $(window).height();
                    //Mouse scrolling distance var iTop = $(window).scrollTop();

                    if(iTop >= $("#header").height()) {
                        oNav.fadeIn();
                        oTop.fadeIn();
                        //Mouse sliding style changes 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>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

Detailed explanation of the process of creating floor navigation effects with JavaScript
JS code example to achieve website floor navigation effect
JS realizes the floor special effects of the navigation bar
Example of anchor point floor jump function implemented by AngularJS
JS realizes the message board function [floor effect display]
Pure HTML+CSS+JavaScript to achieve floor-jumping page layout (example code)
js to realize floor navigation function
A simple example of implementing floor effects using js
JavaScript to achieve floor effect

<<: Docker builds python Flask+ nginx+uwsgi container

>>: js to achieve simple drag effect