如何在没有滚动行为的情况下转到特定部分/没有滚动行为的 scrollIntoView() 的任何替代方法？

Question

我正在尝试创建到特定部分的页面重定向，即我想在没有滚动行为的情况下转到页面上的特定锚点 div。但是，我在 URL 中有一个用于分页的查询字符串，所以 #id 方法对我来说失败了。我试过“scrollIntoView()”但它包含页面滚动行为，这是不希望的。请问这个问题有没有替代方案？

我在前端使用 Vue，在后端使用 Codeigniter。这是我的代码：

        mounted() {
            // anchorPageToProductList
            if (this.isOnQuery) {
                console.log('isOnQuery');
                this.scrollToProductList();
            } else {
                console.log('isNotOnQuery');
            }
            
        },

methods: {
   scrollToProductList(){
       window.addEventListener('DOMContentLoaded', () => {
       // scroll animation
       document.getElementById('product-list-anchor').scrollIntoView(true);
     });
},

我的 URL 案例示例：

http://www.example.com/Product/list?search=&sort=3&type=-1&event%5B%5D=11&pagination=1

谢谢！！

Answer 1

我尝试取消设置滚动行为，允许页面跳转到所需的部分，然后设置回平滑滚动行为。所以它现在可以在没有滚动行为的情况下工作。感谢所有评论:)

我的代码：

scrollToProductList(){

  window.addEventListener('DOMContentLoaded', () => {

      // select the whole html & disable smooth-scroll behavior in css
      let htmlElement = document.querySelector('html');
      htmlElement.style.scrollBehavior = 'auto';

      // go to the anchor point
      document.getElementById('product-list-anchor').scrollIntoView(true);

      // enable smooth-scroll behavior again
      htmlElement.style.scrollBehavior = 'smooth';

  });

}

如何在没有滚动行为的情况下转到特定部分/没有滚动行为的 scrollIntoView() 的任何替代方法？

How to go to particular section without scrolling behavior / Any alternative to scrollIntoView() without scroll behavior?

html

javascript

php

redirect

vue.js