html锚点反向联动,vue 实现导航锚点联动

import jQuery from 'jquery'

export default {

data() {

return {

allMenuList: [

{ id: 1, name: '导航', children: [] },

{ id: 2, name: '导航1' },

{ id: 3, name: '导航2' },

{ id: 4, name: '导航3' },

],

activeMenu: 0,

}

},

created() {},

mounted() {

const that = this

// 获取滚动dom元素

this.scrollBox = document.getElementById('scrollBox')

const jump = jQuery('.do-jump')

console.log(jump)

const topArr = []

for (let i = 0; i < jump.length; i++) {

topArr.push(jump.eq(i).position().top)

}

// 监听dom元素的scroll事件

this.scrollBox.addEventListener(

'scroll',

() => {

const current_offset_top = that.scrollBox.scrollTop

for (let i = 0; i < topArr.length; i++) {

if (current_offset_top <= topArr[i]) {

// 根据滚动距离判断应该滚动到第几个导航的位置

that.activeMenu = i

break

}

}

},

true,

)

},

methods: {

// 跳转

jump(index) {

this.activeMenu = index // 当前导航

const jump = jQuery('.do-jump').eq(index)

const scrollTop = jump.position().top + this.scrollBox.scrollTop // 获取需要滚动的距离

// Chrome

this.scrollBox.scrollTo({

top: scrollTop,

behavior: 'smooth', // 平滑滚动

})

},

},

}

全部应用

v-for="(item, index) in allMenuList"

:key="item.id"

:class="[index === activeMenu ? 'active' : '']"

@click="jump(index)"

>{{ item.name }}

>

{{ val.name }}

• v-for="item in val.children"

  :key="item.id"

  class="applications-item"

  @click="changeRouterForRight(item.pathName, item.menuCode)"

  >

  {{ item.name }}

  v-if="addOrRemove(item.menuCode) == 0"

  class="el-icon-circle-plus add-btn"

  @click="addMenu(item.menuCode)"

  />

  v-if="addOrRemove(item.menuCode) == 1"

  class="el-icon-remove remove-btn"

  @click="removeMenu(item.menuCode)"

  />

.NavScroll {

width: 800px;

margin: 20px auto;

.all-title {

height: 45px;

line-height: 45px;

background-color: red;

.fr {

float: right;

margin: 0 30px;

> span {

float: left;

text-align: center;

margin-left: 20px;

cursor: pointer;

}

.active {

&::after {

content: '';

display: block;

height: 0;

border-bottom: 1px solid black;

}

}

}

}

.applications-content {

width: 100%;

height: 300px;

overflow: hidden;

overflow-y: scroll;

.all-list {

height: 200px;

margin: 10px 0;

// background-color: blue;

border: 1px solid #ccc;

}

}

}

标签：vue,const,name,height,jump,scrollBox,锚点,联动,margin

来源： https://www.cnblogs.com/jinmmm/p/14297195.html