js实现web端锚点定位

今天超市大减价

已于 2022-03-07 17:04:43 修改

阅读量431

点赞数

分类专栏：前端问题及解决方法专栏 JavaScript 文章标签： javascript

于 2022-03-02 10:38:24 首次发布

本文链接：https://blog.csdn.net/qq_40146789/article/details/123224090

版权

前端同时被 3 个专栏收录

65 篇文章 1 订阅

订阅专栏

问题及解决方法专栏

48 篇文章 3 订阅

订阅专栏

JavaScript

21 篇文章 0 订阅

订阅专栏

本文介绍了在Nuxt.js项目中如何实现页面间的跳转定位以及当前页面定位。通过`nuxt-link`组件进行页面跳转，并结合`document.querySelector()`方法和页面滚动来实现在特定元素处的精确定位。同时，文章还提到了`nextTick`的使用以确保DOM更新后再执行滚动操作。

摘要由CSDN通过智能技术生成

开发背景：Nuxt.js项目

一、页面间跳转定位

跳转前页面：

<nuxt-link to="/enterprise#企业开办">
   <div class="pt-3 lg:pt-5 text-lg lg:text-xl">企业开办</div>
   <div class="text-sm pt-1">查看更多</div>
</nuxt-link>

跳转后页面：

<div id="企业开办" class="container">
  <div>企业开办内容</div>
</div>

  mounted () {
    if (location.hash) {
      // 331 '#%E6%8B%9B%E5%95%86%E8%BD%BD%E4%BD%93'
      console.log(331, location.hash)
      const id = decodeURIComponent(location.hash)
      console.log(id)  // "#企业开办"
      const el = document.querySelector(id)
      if (!el) return
      const rect = el.getBoundingClientRect()
      const headerHeight = document.querySelector('.page-header').clientHeight
      // 要两个nextTick才行
      this.$nextTick(() => {
        this.$nextTick(() => {
          window.scroll(0, window.scrollY - headerHeight + rect.top)
        })
      })
    }
  }

注意： querySelector(param) 方法仅仅返回匹配指定选择器的第一个元素。

参数：指定一个或多个匹配元素的 CSS 选择器。可以使用它们的 id, 类, 类型, 属性, 属性值等来选取元素。对于多个选择器，使用逗号隔开，返回第一个匹配的元素。

document.querySelector()方法详解：

document.querySelector()方法_huangbaokang的博客-CSDN博客_document.queryselector

二、当前页面定位

    // domId为需要定位的元素id
    changeTab (domId) {
      const el = document.getElementById(domId)
      const rect = el.getBoundingClientRect()
      // 固定页头的高度
      const headerHeight = document.querySelector('.page-header').clientHeight
      this.$nextTick(() => {
        this.$nextTick(() => {
          window.scroll(0, window.scrollY - headerHeight + rect.top)
        })
      })
    }

记录于2022-3-2