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>

显然，这样做的唯一方法是在网址后面放一个锚点。

任何人都可以帮我解决这个问题吗？

Answer 1

请参阅： Sample

$(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

单击时滚动到元素

2 个答案: