2

我有一个主菜单，显示在网站的每个页面上。该菜单中的一个链接链接到主页上的特定 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 在主页上。

我知道该怎么做吗？

4

3 回答 3

1

将格式的网址添加到您的链接http://mysite.com/homepage/#the-div-class-i-want-to-scroll-to

然后将此js代码添加到您的主页头部分

    $(document).ready(function(){
      /*if you use the id of the div no need for the replace*/
      var target = $(document.location.hash.replace("#","."));
          if (target.length) {
            $('html,body').animate({
              scrollTop: target.offset().top-50
            }, 1000);/*animate in 1sec, you may change this as you like*/
          }
});

我刚刚注意到这是您尝试过的，因此请确保将 js 代码放在主页的正确位置，即将 js 加载到文档准备好的头部中。

于 2013-11-06T08:50:25.023 回答
1

不要使用元素 id 匹配，只需使用锚标签的名称值来滚动：

  $('.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>
于 2013-11-06T09:06:36.057 回答
0

我以前在我的公司网站上做过这个，检查 www.CreaDevSolutions.com，然后从服务菜单中选择一个服务，它会带你到那里，并使用 jquery animate 平滑滚动到服务描述。

这个想法很简单：

1-您需要通过服务器端代码或通过Url参数或cookie在两个页面之间进行通信，我使用了Url参数，我传递的是元素ID。

2-当页面加载时，检查 url 参数中是否有任何变量指向某处（检查第 552 行 getUrlVars()）。

3-如果检索到一个值，那么我调用第 557 行的函数 animateToElement()

于 2013-11-06T08:57:07.620 回答