JS實現側邊欄點選回到指定位置的功能

阿新 • • 發佈：2021-01-12

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>

JS實現側邊欄點選回到指定位置的功能

技術標籤：javascriptweb前端javascriptjs DEMO 程式碼寫的不太好，大佬可以幫忙修改修改哈

js動畫函式實現側邊欄動態顯示內容

技術標籤：前端jsjavascriptcss 功能概要滑鼠懸浮側邊欄彈出資料框同時指示圖示進行變化效果圖

原生JS實現京東檢視商品點選放大

本文例項為大家分享了JS實現京東檢視商品點選放大的具體程式碼，供大家參考，具體內容如下

BBS專案分佈搭建三(個人站點時間歸檔補充，實現側邊欄跳轉、無線級分類、實現文章詳情頁展示功能)

BBS專案分佈搭建三(個人站點時間歸檔補充，) 1. 個人站點時間歸檔 \"\"\" settings.py設定最好更改以下：

vue實現側邊欄手風琴效果

模板程式碼如下 html <template> <div class=\"header\"> <ul>

TornadoFx實現側邊欄選單效果

原文地址:TornadoFx實現側邊欄選單效果 - Stars-One的雜貨小窩之前年前研究的東西,給藍奏批量下載器重構了頁面,實現了側邊欄選單的效果,稍微總結下把

微軟 Edge 瀏覽器 v88 穩定版正式推送：支援更換主題，側邊欄搜尋和歷史記錄同步功能全面啟用

1月22日訊息微軟今日正式推送 Edge 瀏覽器穩定版 88 版本更新。本次更新添加了側邊欄搜尋功能，使用者可以直接選中文字，單擊滑鼠右鍵，並選擇 “在側邊欄中搜索”，且能夠在新標籤頁中檢視 Outlook 郵件，只需在 O

js+css實現全屏側邊欄

本文例項為大家分享了js實現全屏側邊欄的具體程式碼，供大家參考，具體內容如下

JS實現京東商品分類側邊欄

本文例項為大家分享了JS實現京東商品分類側邊欄的具體程式碼，供大家參考，具體內容如下

JS實現頁面側邊欄效果探究

其實效果大概是這樣的：而標題，也許是我當時看到這種效果時的真實感受。因為第一反應是：“還可以把page整體移出頁面？”

原生JS實現分享側邊欄

本文分享一個用原生實現的分享側邊欄，實現效果如下：以下是程式碼實現，方便大家複製貼上。

仿天貓官網主頁側邊欄導航效果（jQuery實現樓層滾動效果）

效果圖： html程式碼： <div id=\"loutinav\"> <ul> <li style=\"background: red;line-height: 35px;\"><span>導航</span> </li>

vue實現tab欄點選高亮效果

本文例項為大家分享了tab欄實現點選高亮，供大家參考，具體內容如下之前面試的時候被問到過如何使用vue實現tab欄切換高亮，

AdminLTE3動態側邊欄實現

使邊欄在被選中時動態啟用。由於AdminLTE3的CSS類名與2的不同，之前的JS程式碼不能用了。

側邊欄js樣式程式碼

`  <div class=\"introduce-box\"> <div class=\"introduce-head\"> <div class=\"introduce-via\" id=\"menuBlogAvatar\"></div>

案例：仿淘寶固定右側側邊欄天貓左側導航欄 js小案例

技術標籤：JavaScriptjavascriptjs 案例：商城固定左側側邊欄動圖程式碼 html部分 <div class="leftnav">

django框架前後端混合專案之側邊欄及點贊點踩功能等相關內容-80

1 側邊欄展示 #查詢當前站點下所有分類下的文章數# python是解釋型語言，做垃圾回收# python的cpython直譯器存在，jpython ,pypy### 三個分組查詢res_category =models.Category.objects.filter(blog=user.blog).a

javascript實現固定側邊欄

用javascript實現固定側邊欄，供大家參考，具體內容如下正在學習大前端中，有程式碼和思路不規範不正確的地方往多多包涵，感謝指教

vue+elementUI元件遞迴實現可摺疊動態渲染多級側邊欄導航

早就實現了功能，但是發現點選的時候，選中的選單項背景色會變白，週五時候仔細觀察了一下，發現並不是調整樣式的問題，而是選項沒有被選中，於是好好研究了一下元件遞迴這塊，總結記錄一下心路歷程

選單欄點選切換的實現

WPF Multiple Views in One Window實現的內容單擊不同的按鈕在同一個視窗中顯示不同的介面

JS實現側邊欄點選回到指定位置的功能

相關推薦