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

在链接中添加格式为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加载到头部。

Answer 2

不要使用元素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>

Answer 3

我之前已经在公司网站上完成了这项工作，请访问www.CreaDevSolutions.com，然后从服务菜单中选择一项服务，它将带您到那里并使用jquery animate顺利滚动到服务描述。

这个想法非常简单：

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

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

3-如果检索到一个值，那么我调用函数animateToElement（），这是在557行上

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

3 个答案: