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

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

效果图如下：

功能代码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监听滚动实现锚点定位(双向)示例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。