css實現(xiàn)電梯導(dǎo)航的項目實踐

發(fā)布時間：2023-05-06 15:51:15 作者： Mr-Wang-Y-P

CSS梯形導(dǎo)航圖是一種使用 CSS 布局實現(xiàn)的導(dǎo)航設(shè)計,可以根據(jù)需要靈活調(diào)整導(dǎo)航菜單的上下位置和大小，本文主要介紹了css實現(xiàn)電梯導(dǎo)航，具有一定的參考價值，感興趣的可以了解一下

啥叫電梯導(dǎo)航呢？

直接上圖

當(dāng)我們點擊左邊的小導(dǎo)航欄的時候，頁面會自動滑動到我們所要看到部分。也許你可能猜到了實現(xiàn)這樣的主要關(guān)鍵點，就是錨點。讓我們接著看。

京東(JD.COM) 官網(wǎng)，大家可以自己嘗試一下看一下效果。

平常大多數(shù)人都會使用js語法進(jìn)行控件綁定，然后實現(xiàn)其相對效果，可是在css中也可以做到。

命名[錨點]的作用：在同一頁面內(nèi)的不同位置進(jìn)行跳轉(zhuǎn)。

通俗理解：可以通過錨點跳轉(zhuǎn)到頁面中的其他位置，當(dāng)頁面過長時，可以將頁面分為幾部分，通過頂部設(shè)置一些錨點，點擊可以方便瀏覽者快速定位到相應(yīng)的位置。

使用語法

1)給元素定義命名錨記名
語法：
<標(biāo)記 id="命名錨記名"> </標(biāo)記>
2)命名錨記連接
語法：
<a href="#命名錨記名稱"></a>

注意

href屬性的屬性值最前面要加**#**（href="#id名）
在要跳轉(zhuǎn)到的位置的標(biāo)簽中添加的是id屬性

可是單純只是用錨點并沒有那種滑動的效果，錨點是直接跳轉(zhuǎn)到指定的位置，并不會有動作。那么怎么用css實現(xiàn)自動滑動呢？

css電梯滑動實現(xiàn)

scroll-behavior

在HTML中有這樣一個屬性。 scroll-behavior 屬性規(guī)定當(dāng)用戶單擊可滾動框中的鏈接時，是否平滑地（具動畫效果）滾動位置，而不是直線跳轉(zhuǎn)。

scroll-behavior: auto|smooth|initial|inherit;

值	描述
auto	默認(rèn)值。允許在滾動框內(nèi)的元素間直接跳轉(zhuǎn)的“滾動效果”。
smooth	允許在滾動框內(nèi)的元素間平滑的“滾動效果”。
initial	將此屬性設(shè)置為其默認(rèn)值。參閱 initial。
inherit	從其父元素繼承此屬性。參閱 inherit。

實現(xiàn)代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css電梯導(dǎo)航</title>
</head>
<body>
    <div style="display: flex;">
    <div>
        <div class="box1" id="box1">服飾</div>
        <div class="box2" id="box2">家電</div>
        <div class="box3" id="box3">生鮮</div>
    </div>
    <div class="slidebar">
        <a href="#box1">服飾</a>
        <a href="#box2">家電</a>
        <a href="#box3">生鮮</a>
    </div>
</div>
</body>
</html>

.box1{
            width: 80vw;
            height: 800px;
            background-color: aqua;
        }
        .box2{
            width:80vw ;
            height: 800px;
            background-color:chartreuse;
        }
        .box3{
            width: 80vw;
            height: 800px;
            background-color:red
        }
        .slidebar{
            display: flex;
            flex-direction: column;
            margin-left: 85vw;
            margin-top: 50px;
            position: fixed;
        }
        .slidebar a{
            text-align: center;
            width: 50px;
            height: 50px;
            font-size: 10px;
        }
        .slidebar a:nth-child(1) {
            background-color: aqua;
        }
        .slidebar a:nth-child(2) {
            background-color: chartreuse;
        }
        .slidebar a:nth-child(3) {
            background-color: red;
        }
        html{
            /* 頁面滾動條滑動 */
            scroll-behavior: smooth;
        }

到此這篇關(guān)于css實現(xiàn)電梯導(dǎo)航的項目實踐的文章就介紹到這了,更多相關(guān)css電梯導(dǎo)航內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！