html锚点反向联动,Vue监听滚动实现锚点定位(双向)示例_苏颜_前端开发者

在项目需求中需要实现一个滚轴联动锚点的功能

效果图如下：

功能代码demo如下：

{{item.name}}

{{item}}

export default {

data(){

return {

scroll: '',

list: [{

name: "第一条",

backgroundcolor: "#90B2A3"

}, {

name: "第二条",

backgroundcolor: "#A593B2"

}, {

name: "第三条",

backgroundcolor: "#A7B293"

}, {

name: "第四条",

backgroundcolor: "#0F2798"

}, {

name: "第五条",

backgroundcolor: "#0A464D"

}],

navList: [1, 2, 3, 4, 5]

}

},

methods: {

dataScroll: function () {

this.scroll = document.documentElement.scrollTop || document.body.scrollTop;

},

jump(index) {

let jump = document.getElementsByClassName('section');

// 获取需要滚动的距离

let total = jump[index].offsetTop;

// Chrome

document.body.scrollTop = total;

// Firefox

document.documentElement.scrollTop = total;

// Safari

window.pageYOffset = total;

// $('

以上这篇开发者。