Locomotive Scroll中能否结合URL锚点使用querySelector实现跨页滚动定位？

异常原因 #

Locomotive Scroll会接管页面原生滚动逻辑，浏览器默认的锚点定位能力会被覆盖。你原有代码仅绑定了当前页面导航点击的滚动逻辑，没有处理页面加载时读取URL锚点的逻辑，因此跨页面跳转后无法定位到对应区块。

实现代码 #

核心逻辑 #

1. 页面加载且Locomotive Scroll初始化完成后，自动读取URL中的锚点，匹配到对应元素后触发滚动
2. 导航点击时判断锚点是否在当前页面：当前页存在则直接滚动，不存在则走正常页面跳转逻辑，跳转后由页面加载逻辑自动处理锚点定位

// 需确保代码在Locomotive Scroll实例化完成后执行
const locoScroll = new LocomotiveScroll({
  el: document.querySelector('[data-scroll-container]'),
  smooth: true
})

// 标记锚点是否已处理，避免重复触发
let hashProcessed = false

// 监听Locomotive Scroll更新事件，确保页面元素高度计算完成后再执行锚点定位
locoScroll.on('updated', () => {
  if (hashProcessed || !window.location.hash) return
  hashProcessed = true
  const hash = window.location.hash.slice(1)
  const targetEl = document.getElementById(hash)
  if (targetEl) {
    locoScroll.scrollTo(targetEl, {
      offset: 0, // 如有固定顶部导航，可设置为导航高度的负值，避免内容被遮挡
      duration: 600
    })
  }
})

// 导航点击事件逻辑修改
$('.nav-link').on('click', function(e) {
  const fullHref = $(this).attr('href')
  const [pagePath, hash] = fullHref.split('#')
  
  // 锚点对应元素在当前页面时，阻止默认跳转直接滚动
  if (hash && window.location.pathname === pagePath) {
    e.preventDefault()
    const targetEl = document.getElementById(hash)
    targetEl && locoScroll.scrollTo(targetEl, {
      offset: 0,
      duration: 600
    })
  }
  // 跨页面锚点不做处理，走原生跳转逻辑，跳转后由上述updated事件处理定位
})

注意事项 #

• 若为SPA单页应用，需在每次路由切换完成后将hashProcessed重置为false，触发新页面的锚点检测
• 若锚点区块内包含图片等异步加载资源，可适当添加延迟逻辑，确保元素位置计算准确
• 如需禁用滚动动画，将duration参数设置为0即可

内容的提问来源于stack exchange，提问作者amnds