JS实现侧边栏点击回到指定位置的功能

最新推荐文章于 2023-01-04 18:22:23 发布

YoungDoCui

最新推荐文章于 2023-01-04 18:22:23 发布

阅读量916

点赞数 2

分类专栏： javascript web前端文章标签： javascript js

本文链接：https://blog.csdn.net/qq_19945487/article/details/112430673

版权

web前端同时被 2 个专栏收录

22 篇文章 0 订阅

订阅专栏

javascript

19 篇文章 0 订阅

订阅专栏

DEMO
代码写的不太好，大佬可以帮忙修改修改哈

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    html {
        scroll-behavior: smooth
    }

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    .item {
        position: relative;
        width: 100%;
        font-size: 30px;
        text-align: center;
        height: 100vh;
        line-height: 100px;
    }



    .tab-item {
        cursor: pointer;
        line-height: 100px;

    }


    .red {
        background-color: red;
    }

    .blue {
        background-color: blue;
    }

    .black {
        background-color: black;
        color: white;
    }

    .yellow {
        background-color: yellow;
    }

    .tab {
        position: fixed;
        width: 100px;
        height: 400px;
        background-color: white;
        top: 30%;
        right: 10px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        text-align: center;
    }

    .show {
        background-color: red;
    }

    .backTop {
        cursor: pointer;
        position: fixed;
        right: 30px;
        bottom: 30px;
        display: none;
        background-color: #ccc;
        width: 100px;
        line-height: 40px;
        color: white;
        animation: show .1s ease;
        text-align: center;
        z-index: 10;
    }

    @keyframes show {
        from {
            transform: scale(0);
            opacity: 0;
        }

        to {
            transform: scale(1);
            opacity: 1;
        }
    }
</style>

<body>
    <div class="backTop">回到顶部</div>
    <div id="list">
        <div class="item red">
            楼区一
        </div>
        <div class="item blue">
            楼区二
        </div>
        <div class="item black">
            楼区三
        </div>
        <div class="item yellow">
            楼区四
        </div>
    </div>
    <div class="tab">
        <div class="tab-item show">一层</div>
        <div class="tab-item">二层</div>
        <div class="tab-item">三层</div>
        <div class="tab-item">四层</div>
    </div>
    <script>
        var show = ['red', 'blue', 'black', 'yellow']
        var tab_item = document.querySelectorAll('.tab-item')
        var item = document.querySelectorAll('.item')
        var flag = true // 禁止连续点击
        var backTop = document.querySelectorAll('.backTop')[0]
        tab_item.forEach((item, index) => {
            item.addEventListener('click', scrollColor, false) //点击改变界面颜色方法
            item.index = index
        });
        function scrollColor() {
            if (flag) {
                flag = false
                console.log(flag);
                var way = item[this.index].offsetTop// 根据自定义属性index 获取侧边栏对应的大色块距离浏览器上面的距离
                var timer = setInterval(() => {
                    scrollTo(0, way) // html css设置 scroll-behavior: smooth 或者封装动画类 参考文章 https://blog.csdn.net/weixin_43625763/article/details/103478291
                    for (var i = 0; i < item.length; i++) {
                        if (way == innerHeight * i) { //  bug 当这两个值相等 清除定时器 此处需优化 似乎还存在点击 但效果还好
                            clearInterval(timer)
                            flag = true
                        }
                    }
                }, 100);
            }
        }
        document.onscroll = function () {
            for (var i = 0; i < tab_item.length; i++) {
                if (scrollY > innerHeight * i - 20) {  // -20设置的稍微提前点 因为最后一次无法触底
                    for (var j = 0; j < tab_item.length; j++) {   // 排他思想
                        tab_item[j].style.backgroundColor = 'white'
                        tab_item[j].style.color = 'black'
                    }
                    tab_item[i].style.backgroundColor = show[i]
                    if (i === 2) { // 单独处理黑色块
                        tab_item[i].style.color = 'white'
                    }
                }
            }
            if (scrollY > innerHeight) { // 按钮在滑动超过第二个色块出现
                backTop.style.display = 'block'
            } else {
                backTop.style.display = 'none'
            }
        }
        backTop.onclick = function () {
            if (flag) { // 禁止多重点击
                flag = false
                var timetop = setInterval(() => { // 设置移动到顶部
                    scrollTo(0, 0)
                    if (scrollY == 0) {
                        clearInterval(timetop)
                        flag = true
                    }
                }, 300);
            }
        }
    </script>
</body>
<html>

YoungDoCui

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
4
评论
JS实现侧边栏点击回到指定位置的功能

DEMO代码写的不太好，大佬可以帮忙修改修改哈<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head>&.
复制链接

扫一扫