无需滚动跳转到页面指定区域？scrollIntoView()无滚动替代方案咨询

先修正原有代码的逻辑问题 #

你当前代码中在scrollToProductList方法里监听DOMContentLoaded事件属于冗余逻辑：Vue的mounted生命周期触发时，当前组件的DOM已经完成挂载，DOMContentLoaded事件在页面初始加载完成时就已经触发，此时再绑定监听根本不会执行回调。

方案1：修改scrollIntoView配置关闭动效 #

scrollIntoView方法支持传入配置对象，直接指定behavior: 'instant'即可关闭滚动动画，无过渡直接跳转：

mounted() {
    // anchorPageToProductList
    if (this.isOnQuery) {
        console.log('isOnQuery');
        this.scrollToProductList();
    } else {
        console.log('isNotOnQuery');
    }
},
methods: {
    scrollToProductList(){
        // 若锚点元素是接口返回数据后才渲染的，必须用$nextTick确保DOM已更新
        this.$nextTick(() => {
            const anchor = document.getElementById('product-list-anchor')
            if (anchor) {
                anchor.scrollIntoView({
                    block: 'start',
                    behavior: 'instant' // 关键配置：关闭滚动动画，直接跳转
                })
            }
        })
    }
}

方案2：直接修改滚动高度（兼容性最强，100%无动画） #

如果担心behavior: 'instant'的极低版本浏览器兼容性，可以直接计算锚点元素的位置，给滚动容器赋值滚动高度，完全没有任何动效：

methods: {
    scrollToProductList(){
        this.$nextTick(() => {
            const anchor = document.getElementById('product-list-anchor')
            if (anchor) {
                // 获取元素距离页面顶部的绝对距离
                const offsetTop = anchor.offsetTop
                // 直接设置页面滚动高度，无任何过渡效果
                window.scrollTo(0, offsetTop)
                // 如果滚动容器是自定义div，替换为对应容器即可，示例：
                // document.querySelector('.custom-scroll-box').scrollTop = offsetTop
            }
        })
    }
}

可选：原生锚点兼容方案 #

如果你希望保留URL带hash的原生锚点能力，也可以在跳转完成后手动修改hash，不会覆盖已有的查询参数：

// 跳转完成后执行，修改当前URL hash不触发页面刷新
history.replaceState(null, '', location.href + '#product-list-anchor')

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