vue：實現豎向滾動條效果並實現錨點定位跳轉

一、左側使用ul和li標簽來實現菜單欄的效果

<template>
    <div class="container">
        <el-container>
            <el-aside width="350px" class="aside">
                      <ul>
                        <li>賬號注冊
                            <ul>
                                <el-link :underline="false"><li @click='lookUp("#header1")' 
　　　　　　　　　　　　　　　　　　　　　　　　　　:class="{active: nowId === '#header1' ? isActive : ''}">企業注冊</li></el-link><br/>
                                <el-link :underline="false"><li @click='lookUp("#header2")' 
　　　　　　　　　　　　　　　　　　　　　　　　　　:class="{active: nowId === '#header2' ? isActive : ''}">用戶注冊</li></el-link>
                            </ul>
                        </li>
                      </ul>
                </el-aside>
            <el-main class="main">
                <div id="header1" class="header1">
                    <div class="firstTitle">一、准備工作</div><br>
                    <div class="contentStyle">
                        &nbsp;&nbsp;&nbsp;&nbsp;系統操作前，需先打開瀏覽器，進入葯品物聯網供應保障管理平台登錄頁面。<br/>
                    </div>
                    <div class="secondTitle">&nbsp;&nbsp;1. 已有賬號</div><br>
                    &nbsp;&nbsp;&nbsp;&nbsp;如果已有賬號，輸入用戶名和密碼，點擊[登錄]，成功登錄系統。<br/>
                    <el-image :src="require('@/assets/images/manualPic/login.png')" fit="fill"></el-image>
                </div>
                <div id="header2" class="header2">
                    <div class="secondTitle">&nbsp;&nbsp;2. 沒有賬號</div><br>
                    &nbsp;&nbsp;&nbsp;&nbsp;如果沒有賬號，需要點擊[免費注冊]，進行賬號注冊。<br/>
                    <el-image :src="require('@/assets/images/manualPic/register.png')" fit="fill"/>
                </div>
                <el-card class="box-card" shadow="hover">
                    <el-link :underline="false">
                        <el-tooltip content="返回首頁" placement="top">
                            <span class="el-icon-thumb" @click="backToIndex"></span>
                        </el-tooltip>
                    </el-link>
                </el-card>
            </el-main>
        </el-container>
    </div>
</template>

注意：

1）、通過el-aside標簽的width屬性來控制側邊欄的寬度。

2）、使用el-link標簽使菜單有可點擊的效果，鼠標放上去變成小手。通過將underline屬性值設置為false去掉下划線。

3）、通過class的屬性綁定來實現是否激活的效果，代碼如下：

:class="{active: nowId === '#header1' ? isActive : ''}"

data數據模型中isActive設置為true

active的樣式：

.active{
                 color: #409EFF;
            }

4）、el-image引入圖片需要使用require。

5）、返回首頁的效果的實現：使用el-card實現懸浮的效果，使用el-link來實現可點擊的效果，使用el-tooltip實現消息提示，里面放一個elementUI的icon。

樣式如下：

.box-card {
                /*讓小手居中顯示*/
                display: flex;
                justify-content: center;
                align-items: center;
                /*設置圓形的大小和定位*/
                height: 60px;
                width: 60px;
                border-radius: 50%;
                position: fixed;
                bottom: 35px;
                right: 15px;
                /*padding-left: 20px;*/
                /*float: right;*/
                /*設置圓形的背景色和陰影*/
                background-color: #f2f5f6;
                box-shadow: 0 0 6px rgba(0,0,0, .12);
                /*手表放上去時光標的形狀*/
                cursor: pointer;
                span{
                    /*設置小手的大小*/
                    font-size: 30px;
                    /*color: #1989fa;*/
                }
            }

6）、ul去掉前面的點：

ul{
        list-style-type: none;
    }

二、側邊欄和主體區域實現滾動條效果

.aside{
    height: calc(100vh-52px); overflow-y:scroll;
        background-color: ghostwhite; // 鬼白
    }
    .main{
        height: calc(100vh-52px); // 取消瀏覽器的滾動條，只需修改主體區域的高度即可，將整個視口的高度減去頂部導航條的高度即可 /*-webkit-overflow-scrolling: touch;*/
        overflow-y:scroll;
    }

注意：要有高度屬性，1vh = 1%，vh表示視口高度viewpoint height；1vw = 1%，vw表示視口寬度viewpoint width，

overflow : scroll ;  /*任何時候都強制顯示滾動條*/
overflow : auto ;  /*需要的時候會出現滾動條*/
overflow-x: auto ;  /*控制X方向的滾動條*/
overflow-y: auto ;  /*控制Y方向的滾動條*/

還可以使用-webkit-overflow-scrolling屬性來實現滾動效果，

-webkit-overflow-scrolling 屬性控制元素在移動設備上是否使用滾動回彈效果.
auto: 使用普通滾動, 當手指從觸摸屏上移開，滾動會立即停止。
touch: 使用具有回彈效果的滾動, 當手指從觸摸屏上移開，內容會繼續保持一段時間的滾動效果。繼續滾動的速度和持續的時間和滾動手勢的強烈程度成正比。同時也會創建一個新的堆棧上下文。

 三、vue中實現錨點定位跳轉

methods: {
            lookUp(id){
                this.nowId = id
                document.querySelector(id).scrollIntoView(true);
            },
            backToIndex(){
                this.$router.push('index') // 編程式導航
            }
        }

其中：

document.querySelector(“要返回地方的id”).scrollIntoView(true);

HTML5選擇了scrollIntoView() 作為標准方法,scrollIntoView()可以在所有的HTML元素上調用。

通過滾動瀏覽器窗口或某個容器元素，調用元素就可以出現在視窗中。

如果給該方法傳入true作為參數，或者不傳入任何參數，那么 窗口滾動之后會讓調動元素頂部和視窗頂部盡可能齊平。

如果給該方法傳入false作為參數，調用元素會盡可能全部出現在視口中（可能的話，調用元素的底部會與視口的頂部齊平）不過頂部不一定齊平。

效果如下：