jquery - 单击时滚动到元素

Question

我有以下问题：

我有一个按钮：

<div id="meerinfotoestel">
   <a id="scroll-to-meerinfo" href="#meerinfo">
      Meerinfo
   </a>
</div>

我已经设置了一些具有以下名称的选项卡：

.woocommerce-tabs

现在我希望屏幕滚动到选项卡，点击。

我有以下脚本：

<script>
$(document).ready(function () {  
    $('#scroll-to-meerinfo').click(function(event){
    event.preventDefault();
    scrollToElement('.woocommerce-tabs');
});
</script>

显然，这样做的唯一一件事就是在 url 之后放置一个锚点。

谁能帮我解决这个问题？

Answer 1

看到这个： 样本

$(document).ready(function () {
  $('#scroll-to-meerinfo').click(function (event) {
    event.preventDefault();
    scrollToElement($('.woocommerce-tabs'));
  });

  function scrollToElement(elem) {
    $('body').animate({
        scrollTop: elem.offset().top
    }, 2000);
  }
});

Answer 2

试试这个：

$(document).ready(function () {  
    $('#scroll-to-meerinfo').click(function(event){
      event.preventDefault();
      $('#woocommerce-tabs').scrollIntoView(true);
      // let your tab id is woocommerce-tabs
    });
});

scrollIntoView 的语法

element.scrollIntoView(alignWithTop);

阅读文档https://developer.mozilla.org/en-US/docs/DOM/element.scrollIntoView