Nuxt.js与TS实现锚点功能-优快云博客

本文链接：https://blog.youkuaiyun.com/jeremygeng/article/details/102697974

本文介绍如何在Nuxt.js项目中利用TypeScript（TS）封装锚点功能，包括实现效果展示及关键代码解析。

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

基于nuxt+ts封装的锚点功能

效果

第一页
点击333之后的效果

代码

子组件


<script lang='tsx'>
import { Component, Vue, Prop, Emit, Watch, Mutation } from 'nuxt-property-decorator'
interface anchorItem {
  icon: string,
  text: string,
  class: string,
  href: string
}
interface anchorContentItem {
  title: string,
  secondTitle: string
}
@Component
export default class SolutionItemComponent extends Vue {
  @Prop({
    type: Array,
    default () {
      return []
    }
  }) public anchorArr!: Array<anchorItem>;
  @Prop({
    type: Array,
    default () {
      return []
    }
  }) public anchorContent !: Array<anchorContentItem>
  // 是否在顶部
  public isPosTop: boolean = false
  
  // 锚点点击事件
  public clickAnchor (item) {
     this.anchorArr.forEach(item => {
      item.class = ''
    })
    item.class = 'active'
    let anchorTop: any = this.$refs.anchorTop
    let anchorTopHeight = anchorTop.clientHeight
    let menu: any = document.getElementsByClassName('head-box')[0]
    let menuHeight = menu.clientHeight
    let element: any = document.getElementById(item.href)
    let elementTop = element.offsetTop
    let oldScrollTop = document.getElementsByClassName('container-box')[0].scrollTop
    if (oldScrollTop < elementTop - anchorTopHeight - menuHeight) {
      let timer = setInterval(function () {
        let scrollTop = document.getElementsByClassName('container-box')[0].scrollTop
        if (scrollTop >= elementTop - anchorTopHeight - menuHeight) {