jquery - 使用 jquery 平滑滚动到不同页面上的特定 div

Question

我有一个主菜单，显示在网站的每个页面上。该菜单中的一个链接链接到主页上的特定 div。

我希望当我点击该链接时，它应该滚动到该 div 上方 50 像素。

因此，当我在主页上单击它时，它应该平滑滚动到该特定 div 上方 50 像素。

当我在不同的页面上并单击该链接时，它应该重定向到主页并滚动到该特定 div 上方 50 像素。

我尝试过的代码

    <a href='/#element_id'>Link</a>
$('a').click(function() {
        var divLoc = $('#element_id').offset();
        $('html, body').animate({
          scrollTop: divLoc.top-50}, "slow");
      });

但这仅在我位于主页时有效，因为该特定 div 位于主页上。

我知道如何做到这一点吗？

Answer 1

不使用元素 ID 匹配，只需使用 anchor 标记的名称值即可滚动:

  $('.scroll-anchor').click(function () {
            $('html, body').animate({
                scrollTop: $('[name="' + $.attr(this, 'href').substr(1) + '"]').offset().top
            }, 500);
            return false;
        });

<a class="scroll-anchor" href="#myreusableanchorname">My Resuable scroll for each page</a>

 <a name="myreusableanchorname"></a>