需求：vue项目中，页面内容过多需要往下滚动很多才能见信息浏览完，但是操作按钮却在顶部，浏览修改完信息后要回到顶部后才能进行操作，操作不方便，因此要添加一个导航栏，通过菜单跳转到页面指定的位置，导航栏可以展开隐藏！
代码实现：

1. 导航栏部分

<dl class="menu">
 <div class="menuContent">
   <div v-if="ismMenuShow" class="menuButtons" @click="hideContent()">
     <i class="el-icon-d-arrow-right"></i>
   </div>
   <div v-if="!ismMenuShow" class="menuButtons" @click="showContent()">
     <i class="el-icon-d-arrow-left"></i>
   </div>
   <dd :class="{active:1===numbers}"><el-link :underline="false" @click="changColor(1)">导航1</el-link></dd>
   <dd :class="{active:2===numbers}"><el-link :underline="false" @click="changColor(2)">导航2</el-link></dd>
   <dd :class="{active:3===numbers}"><el-link :underline="false" @click="changColor(3)">导航3</el-link></dd>
   <dd :class="{active:4===numbers}"><el-link :underline="false" @click="changColor(4)">导航4</el-link></dd>
   <dd :class="{active:5===numbers}"><el-link :underline="false" @click="changColor(5)">导航5</el-link></dd>
 </div>
</dl>

2. script部分

data() {
    return {
    	...
    	numbers: 1,
    	ismMenuShow: true,
    ...
    }
},
methods: {
	hideContent() {
      document.querySelector('.menu').style = 'right: -145px; transition: 1s;'
      this.ismMenuShow = false
    },
    showContent() {
      document.querySelector('.menu').style = 'right: 0; transition: 1s;'
      this.ismMenuShow = true
    },
    changColor(val) {
      this.numbers = val
      document.getElementById(val).scrollIntoView()
    },
    
    ......
}

3. css部分

.menu {
  background: #ffffff;
  font-size: 16px;
  position: fixed;
  text-align: left;
  height: 300px;
  width: 145px;
  padding: 5px;
  margin: auto;
  z-index: 999;
  border: 1px solid #999;
  box-shadow: 0 0 4px #999;
  top: 0;
  bottom: 0;
  right: 0;
  padding-left: 12px;
}
dl dd {
  margin: 6px 0 6px 12px;
}
.active > .el-link.el-link--default {
  color: #1890ff !important;
  font-weight: bold !important;
}
.active::before {
  display: block;
  content: '';
  border: 10px solid transparent;
  border-left-color: #1890ff;
  position: absolute;
  left: 0;
}
.menuContent{
  position: relative;
}
.menuButtons{
  width: 22px;
  height: 50px;
  line-height: 50px;
  position: absolute;
  top: 125px;
  left: -22px;
  z-index: 999;
  border-radius: 10px;
  background: #606266;
  opacity: 0.3;
  text-align: center;
  vertical-align: middle;
}
.menuButtons:hover{
  opacity: 1;
}

4. 页面内容部分

 <div id="1" class="InfoClass">导航1</div>
 <!-- 导航1内容 -->
 <div id="2" class="InfoClass">导航2</div>
 <!-- 导航2内容 -->
 <div id="3" class="InfoClass">导航3</div>
 <!-- 导航3内容 -->
 <div id="4" class="InfoClass">导航4</div>
 <!-- 导航4内容 -->
 <div id="5" class="InfoClass">导航5</div>
 <!-- 导航5内容 -->