如何通过 Magento2 CMS 中的元素 id 将页面正文滚动到特定位置？

Question

I want to open a product tab on the product page with a click of an anchor tag in Magento2. The Magento2 CMS version is 2.2.5, below is the code:

 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>

.

So here I want to open the FAQ's product tab with scroll down the page body. You can check on my website as well: https://example.com/staging/tinted-sunscreen.html My script is working fine to open the FAQ's tab but the page body is not scrolling down to the desired element location. Please let me know, how I can achieve this thing. I just want to open FAQ's tab after the click on the 'Readmore...' link and page body jump to that place.

Thanks in Advance, please help.

Answer 1

You can use the scrollIntoView method inside your click handler:

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