vue关于锚点标签联动demo

最新推荐文章于 2024-04-03 10:32:00 发布

唐月123456

最新推荐文章于 2024-04-03 10:32:00 发布

阅读量519

点赞数

CC 4.0 BY-SA版权

分类专栏：布局 js代码

本文链接：https://blog.youkuaiyun.com/weixin_39054337/article/details/103384083

js代码同时被 2 个专栏收录

15 篇文章

订阅专栏

布局

6 篇文章

订阅专栏

本文介绍了一个使用Vue.js实现的页面滚动监听与导航功能，通过监听滚动事件，自动更新导航链接的高亮状态，并允许用户点击导航链接快速跳转到页面相应部分。文章详细展示了如何设置页面布局，配置滚动监听函数以及实现导航点击效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!--
* @Author: your name
* @Date: 2019-12-04 10:09:49
 * @LastEditTime: 2019-12-04 11:56:29
 * @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
-->
<template>
  <div class="container">
      <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:red;" :style="{'border':item.border}">{{item.name}}</div>
      </div>
    <div id="nac" style="height:500px;"></div>
    <div style="position:fixed;right:30px;top:300px;">
      <a class="nav1" @click="textClick(index)" v-for="(item, index) in navList" :key="index" :class="index==className?'current':''">{{item}}</a>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      scroll: '',
      list: [{
        name: '111',
        border: '1px solid red'
      }, {
        name: '222',
        border: '1px solid red'
      }, {
        name: '333',
        border: '1px solid red'
      }, {
        name: '444',
        border: '1px solid red'
      }, {
        name: '555',
        border: '1px solid red'
      }],
      className: null,
      navList: [1, 2, 3, 4, 5]
    }
  },
  methods: {
    dataScroll: function () {
      this.scroll = document.documentElement.scrollTop || document.body.scrollTop
    },

    textClick (index) {
      let jump = document.getElementsByClassName('section')
      let total = jump[index].offsetTop
      document.body.scrollTop = total
      document.documentElement.scrollTop = total
      window.pageYOffset = total
    },
    loadSroll: function () {
      var self = this
      var sections = document.getElementsByClassName('section')
      for (var i = sections.length - 1; i >= 0; i--) {
        if (self.scroll >= sections[i].offsetTop - 100) {
          this.className = i
          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>