Magento2 CMS 如何通过元素 id 将页面主体滚动到特定位置？

Question

我想在 Magento2 中通过单击锚标记在产品页面上打开一个产品选项卡。 Magento2 CMS版本为2.2.5，代码如下：

require([
  'jquery'
], function($) {
  $(document).ready(function() {
    $('.mor-link').on('click', function(event) {
      // Prevent URL change
      console.log('clicked');
      event.preventDefault();
      // `this` is the clicked <a> tag
      $('[data-toggle="switch"][href="' + this.hash + '"]').trigger('click');
    });
  });
});

<a id="read_more" class="mor-link" href="#new3.tab">Read More...</a>

.

所以在这里我想通过向下滚动页面主体来打开常见问题解答的产品选项卡。您也可以在我的网站上查看：https://example.com/staging/tinted-sunscreen.html 我的脚本可以正常打开常见问题解答选项卡，但页面正文没有向下滚动到所需的元素位置。请让我知道，我怎样才能做到这一点。我只想在单击 'Readmore...' link 和页面正文跳转到该位置后打开常见问题解答选项卡。

在此先感谢，请帮忙。

Answer 1

您可以在点击处理程序中使用 scrollIntoView 方法：

$('.mor-link').on('click', function(event) {
  event.preventDefault();
  $('[data-toggle="switch"][href="' + this.hash + '"]').trigger('click');
  document.getElementById("tab-label-new3.tab").scrollIntoView();
});

Magento2 CMS 如何通过元素 id 将页面主体滚动到特定位置？

How to scroll the page body to the specific location by element id in Magento2 CMS?

javascript

jquery

html

css

magento2.2