Vue监听滚动实现锚点定位(双向)示例

在项目需求中需要实现一个滚轴联动锚点的功能效果图如下：功能代码demo如下：<template&g

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

效果图如下：

功能代码demo如下：

<template>
 <div class="container">
 <div class="wrapper">
 <div class="section" style="height:500px;width:100%" v-for="(item, index) in list" :key="index" :style="{'height':index==0?'1000px':'500px'}">
 <div style="width:100%;height:100%;font-size:30px;text-align:center;font-weight:bold;color:#fff;" :style="{'background':item.backgroundcolor}">{{item.name}}</div>
 </div>
 </div>
 <div id="nac" style="height:500px;"></div>
 <nav style="position:fixed;right:30px;top:300px;">
 <a class="nav1" v-for="(item, index) in navList" :key="index" @click="jump(index)" :class="index==0?'current':''">{{item}}</a>
 </nav>
 </div>
</template>
<script>
 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;
 // $('html, body').animate({
 // 'scrollTop': total
 // }, 400);
 },
 loadSroll: function () {
 var self = this;
 var $navs = $(".nav1");
 var sections = document.getElementsByClassName('section');
 for (var i = sections.length - 1; i >= 0; i--) {
 if (self.scroll >= sections[i].offsetTop - 100) {
 $navs.eq(i).addClass("current").siblings().removeClass("current")
 break;
 }
 }
 }
 },
 watch: {
 scroll: function () {
 this.loadSroll()
 }
 },
 mounted() {
 window.addEventListener('scroll', this.dataScroll);
 }
 }
</script>

<style>
 * {
 padding: 0;
 margin: 0;
 }
 .nav1 {
 display: block;
 width: 40px;
 height: 40px;
 text-align: center;
 line-height: 40px;
 background: #eee;
 margin: 10px 0;
 }
 .current {
 color: #fff;
 background: red;
 }
</style>

以上这篇Vue监听滚动实现锚点定位(双向)示例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

Vue 监听滚动 锚点定位