js实现，点击侧边导航栏，可以平缓的跳到界面指定位置，同时当界面某个元素在浏览器可视范围的时候，相应的导航栏也显示相应的样式_jsp中页面右侧浮动导航点击定位至指定内容

注：要下载安装好jquery和element-ui

"element-ui": "^2.15.8"
"jquery": "^3.6.0"

有时候在使用‘$’报错找不到，可以直接在组件内这样使用

import $ from 'jquery'
window.jQuery = $
window.$ = $

效果如下：

 html代码：

<div>
    <div class="navBox">
      <ul class="navigation">
        <li class="currentLi"><i class="el-icon-top" @click="goUp"></i></li>
        <li
          v-for="(item,index) in navList"
          :key="index"
          class="navLi"
          @mouseover="liSeover(item,index)"
        >
          <span class="navListTitle">{{ item.title }}</span>
          <span v-if="index===currentIndex" class="blacDian"></span>
          <a :class="index===currentIndex?'currentClick':''" :href="item.name" :title="item.title"
             @click="changji(item.name,index)">{{ item.current }}</a>
        </li>
       <li class="currentLi"><i class="el-icon-bottom" @click="goDown"></i></li>
   </ul>
</div>
 
 
<div id="xxx1" style="height: 600px;width: 100%;background-color: #95542E"><h1>xxx1</h1></div>
    <div id="xxx2" style="height: 600px;width: 100%;background-color: red"><h1>xxx2</h1></div>
    <div id="xxx3" style="height: 600px;width: 100%;background-color: rebeccapurple"><h1>xxx3</h1></div>
    <div id="xxx4" style="height: 600px;width: 100%;background-color: royalblue"><h1>xxx4</h1></div>
    <div id="xxx5" style="height: 600px;width: 100%;background-color: green"><h1>xxx5</h1></div>
    <div id="xxx6" style="height: 600px;width: 100%;background-color: antiquewhite"><h1>xxx6</h1></div>
    <div id="xxx7" style="height: 600px;width: 100%;background-color: #122B3F"><h1>xxx7</h1></div>
 
 
</div>

css代码:

.navListTitle {
  position: absolute;
  left: -60px;
  top: 0;
  font-size: 12px;
  display: none;
}
 
.navLi:hover .navListTitle {
  display: block;
}
 
.blacDian {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #DC6821;
  position: absolute;
  top: 7px;
  left: 3px;
}
 
.currentClick {
  color: #DC6821;
}
 
.navBox {
  position: fixed;
  right: 30px;
  top: 25%;
  border: 1px solid;
  width: 50px;
  box-sizing: border-box;
}
 
.navigation li {
  list-style-type: none;
  margin: 40px 0;
  position: relative;
}
 
a {
  text-decoration: none;
  color: white;
}
 
a:hover, .currentLi:hover {
  color: #DC6821;
  cursor: pointer;
}
 
* {
  margin: 0;
  padding: 0;
}

js代码：

data () {
    return {
      currentIndex: 0,
      currentPoint: '',
      navList: [
        {name: '#xxx1', title: '第1个导航', current: '01'},
        {name: '#xxx2', title: '第2个导航', current: '02'},
        {name: '#xxx3', title: '第3个导航', current: '03'},
        {name: '#xxx4', title: '第4个导航', current: '04'},
        {name: '#xxx5', title: '第5个导航', current: '05'},
        {name: '#xxx6', title: '第6个导航', current: '06'},
        {name: '#xxx7', title: '第7个导航', current: '07'}
      ]
    }
  },
 
 
 
mounted () {
    $(window).on('scroll', () => {
      let el1 = document.getElementById('xxx1')
      let el2 = document.getElementById('xxx2')
      let el3 = document.getElementById('xxx3')
      let el4 = document.getElementById('xxx4')
      let el5 = document.getElementById('xxx5')
      let el6 = document.getElementById('xxx6')
      let el7 = document.getElementById('xxx7')
      let arr = [el1, el2, el3, el4, el5, el6, el7]
      arr.forEach((k) => {
        if (this.isInViewPort(k)) {
          console.log(k.id)
          let findIndex = '#' + k.id
          this.navList.forEach((o, i) => {
            if (o.name === findIndex) {
              this.currentIndex = i
              this.currentPoint = o.name
            }
          })
        }
      })
    })
}
 
 
 
methods:{
    goUp () {
      this.navList.forEach((o,i)=>{
        if (o.name === this.currentPoint) {
          if (i===0) {
            this.$message({
              message: '当前已是第一个！',
              type: 'warning'
            });
            return
          }
          document.querySelector(this.navList[i-1].name).scrollIntoView({behavior: 'smooth'})
        }
      })
    },
    goDown() {
      this.navList.forEach((o,i)=>{
        if (o.name === this.currentPoint) {
          if (i === this.navList.length-1) {
            this.$message({
              message: '当前已是最后一个！',
              type: 'warning'
            });
            return
          }
          document.querySelector(this.navList[i+1].name).scrollIntoView({behavior: 'smooth'})
        }
      })
    },
    liSeover (item, index) {
    },
    changji (value, index) {
      this.currentIndex = index
      // eslint-disable-next-line no-undef
      // 綁定導航列每個 a 的點擊事件
      $('.navigation > li > a').click(function (e) {
        e.preventDefault() // 取消預設動作(直接跳轉到錨點)
        // 改由 jquery 的 animate 實現平滑移動到錨點
        $('html, body').animate({
          // 取得原先要移動至的元素，取得離上方距離，在 300ms 內完成捲軸動畫
          scrollTop: $($.attr(this, 'href')).offset().top
        }, 500)
      })
    },
   // 判断一个元素是否在可视区域中方法2
    isInViewPort (element) {
      const viewWidth = window.innerWidth || document.documentElement.clientWidth || ''
      const viewHeight = window.innerHeight || document.documentElement.clientHeight || ''
      const {
        top,
        right,
        bottom,
        left,
      } = element.getBoundingClientRect()
 
      return (
        top >= 0 &&
        left >= 0 &&
        right <= viewWidth &&
        bottom <= viewHeight
      )
    },
    // 判断一个元素是否在可视区域中方法1
    isInViewPortOfOne (el) {
      // viewPortHeight 兼容所有浏览器写法
      const viewPortHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
      const offsetTop = el.offsetTop
      const scrollTop = document.documentElement.scrollTop
      const top = offsetTop - scrollTop
      return top <= viewPortHeight
    }
}

说明：

1、document.querySelector(this.navList[i-1].name).scrollIntoView({behavior: 'smooth'})该scrollIntoView()方法将调用它的元素滚动到浏览器窗口的可见区域，

2、changji（）方法将点击a标签，平缓的移动到href='id'绑定的id的位置，使用jquery中的animate来进行，所以确保自己项目安装了juqery

3、currentClick类样式来区别当前是那个导航栏或者当前那个元素在浏览器可视范围的样式，依赖index（当前点击的侧边导航栏或者当前在浏览器可视范围的元素来控制）

4、currentPoint属性很重要，它保存的是当前是那个元素在浏览器的可视范围，值为每个元素的id值，如：‘#xxx7’,导航栏最上面和最下面的两个箭头，就是依赖这个值来进行的

5、isInViewPort（）方法用来判断当前是哪个元素在浏览器的可视访问，执行它放回的是一个布尔值，然后再组件的生命周期函数mounted里面监听窗口滚动条的变化，当滚动条变化时，给每一个元素绑定isInViewPort（）方法，来识别当前是那个元素在浏览器可视范围来改变index的值，从而改变当前导航栏的样式，已到达我们目的

添加个额外知识

1：clientWidth和clientHeight: 可视部分的高度和宽度，content+padding,如果出现滚动条，会覆盖元素宽高，减去滚动条的宽高:

2：clientLeft和clientTop这个属性指的就是读取它本身这个元素border的宽度和高度
3：offsetWidth和offsetHeight: content+padding+border,与滚动条无关，最终滚动条会包裹在它们里面:4：offsetLeft和offsetTop两个比较抽象，就是偏移的意思，这个一般是它自己本事的偏移，如元素身上有margin,left,top，等，一般都是根据最近的定位元素的父级来定的偏移多少，通常与offsetParent属性结合做一些动画