什么是楼梯特效？

最新推荐文章于 2023-12-21 18:47:41 发布

原创最新推荐文章于 2023-12-21 18:47:41 发布 · 380 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

前端同时被 3 个专栏收录

40 篇文章

订阅专栏

JavaScript

12 篇文章

订阅专栏

jQuery

6 篇文章

订阅专栏

本文介绍了一种楼梯特效的实现方法，通过计算页面上各板块的位置，使点击左侧按钮能平滑跳转至相应板块，增强了用户体验。

什么是楼梯特效？

如果各大网站点击按钮本页面跳转对应的板块的功能就是楼梯效果

思路

大家可以看到左侧的按钮和右侧的内容板块是一一对应的，所以我们需要知道右侧每个板块在当前页面的位置在可以通过左侧的楼梯去控制右侧的板块内容的跳转。试想，右侧每一个板块都会距离页面顶端距离，只需要点击左侧按钮让对应位置的楼梯跳转到对应板块的高度位置即可。接下来具体代码实现.

js核心代码

    // 梯子对象
    function Stairs(options) {

        this.options = options;
        this.init();
    }
    Stairs.prototype = {
        constructor: Stairs,
        init: function () {
            // 计算每一个内容元素的高度的数组
            this.content_ele_offset_top_list = [];
            // 获取元素的偏移量
            $(this.options.content_selector).offset(function (index, cords) {
                // 将每一个元素的高度值放入发哦度列表之中
                this.content_ele_offset_top_list.push(cords.top);
                return cords;
            }.bind(this));

            // 计算最小高和最大高
            let _length = this.content_ele_offset_top_list.length;

            this.min_top = this.content_ele_offset_top_list[0];
            this.max_top = this.content_ele_offset_top_list[_length - 1] + $(this.options.content_selector).last().height();
            // 同样我们吧这个最高的值放入数组中之后的计算需要使用
            this.content_ele_offset_top_list.push(this.max_top);
            // 每一次页面刷新的时候需要先计算一下梯子的位置
            // 获得数据
            let scrollTop = $("body, html").scrollTop();
            // 计算下标
            this.calcStairsIndex(scrollTop);
            this.bindEvent();
        },
        bindEvent: function () {
            let $body_html = $("body,html");

            let instance = this;
            // 滚动事件监听
            // 函数节流的变量
            let t = null;
            $(document).scroll(function () {
                if (typeof t === "number") {
                    return false;
                }
                t = setTimeout(() => {
                    t = null;
                    // 获得数据
                    let scrollTop = $body_html.scrollTop();
                    // 计算下标
                    this.calcStairsIndex(scrollTop);
                }, 200)
            }.bind(this));

            // 点击右侧楼梯的我们需要滚动至对应的位置 绑定事件
            $(this.options.stairs_selector).click(function () {
                // 先得到点击事件元素在数组中的下标 通过这个下标找到对应的板块
                let index = $(this).index(instance.options.stairs_selector);
                instance.changeStairsIndex(index);
            })
        },
        calcStairsIndex: function (st) {
            // 如果小于最小的高度和最大的高度我们直接结束下面的函数
            if (st < this.min_top || st > this.max_top) {

                this.index = -1;
                this.changeStairsBtn();
                return false;
            }
            let _list = this.content_ele_offset_top_list;
            // 数据一直在这个范围之内我们就不在重复计算了
            if (st >= _list[this.index] && st < _list[this.index + 1]) {
                return false;
            }
            // 遍历记录滚入的楼梯的下标
            for (let i = 0; i < _list.length; i++) {
                if (st >= _list[i] && st < _list[i + 1]) {
                    this.index = i;
                    break;
                }
            }
            this.changeStairsBtn();
        },
        /**
         * 改变梯子的选中状态
         */
        changeStairsBtn: function () {
            if (this.index === -1) {
                $(this.options.stairs_selector).removeClass("cur");
                return false;
            }
            // 如果不熟index===-1 说明要选中对应下标的楼梯
            $(this.options.stairs_selector).eq(this.index).addClass("cur").siblings().removeClass("cur");
        },
        /**
         * 改变梯子选中的下标的
         * @param {点击的梯子的下标} index 
         */
        changeStairsIndex: function (index) {

            // 通过这个index我们去scroll对应的板块
            $("body,html").scrollTop(this.content_ele_offset_top_list[index]);
            $(document).trigger("scroll");
        }
    }

html+css代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        .container {
            width: 900px;
            margin: 200px auto;
            position: relative;
        }
        .floor {
            height: 900px;
            background-color: aqua;
        }
        .f2 {
            background-color: yellowgreen;
        }
        .f3 {
            background-color: teal;
        }
        .f4 {
            background-color: burlywood;
        }
        .stairs {
            position: fixed;
            top: 50%;
            left: 13%;
            width: 60px;
            height: 100px;
            margin-top: -50px;
            border: 1px solid #eeeeee;
            text-align: center;
            cursor: pointer;
        }
        .stairs div {
            padding: 5px 0;
        }
        .stairs .cur{
            color: #ffffff;
            background-color: #f10e30;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="floor f1">第一层楼梯</div>
        <div class="floor f2">第二层楼梯</div>
        <div class="floor f3">第三层楼梯</div>
        <div class="floor f4">第四层楼梯</div>
        <div class="stairs">
            <div class="s cur">第一层</div>
            <div class="s">第二层</div>
            <div class="s">第三层</div>
            <div class="s">第四层</div>
        </div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
    <script src="./js/Stairs.js"></script>
    <script>
        $(function(){

            new Stairs({
                content_selector : ".floor", // 与楼梯对应的板块盒子
                stairs_selector : ".stairs .s" // 每一个楼梯
            })
        });
    </script>
</body>
</html>

如何使用

首先我们需要引入jQuery代码<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.min.js"></script>,然后引入楼梯核心代码的js文件<script src="./js/Stairs.js"></script>,调用对象

    <script>
        $(function(){

            new Stairs({
                content_selector : ".floor", // 与楼梯对应的板块盒子
                stairs_selector : ".stairs .s" // 每一个楼梯
            })
        });
    </script>