带有 url 的平滑锚滚动

Question

我想用 jQuery 实现平滑滚动到锚点。我找到了一些解决方案，但是，它们都是基于指向锚点的链接看起来像这样的事实：

<a href="#anchor-id">TEST</a>

在我的场景中，链接如下所示：

<a href="some-page#anchor-id">TEST</a>

我有一个全局导航栏，其中包含指向“某些页面”的链接，悬停菜单条目会打开一个下拉菜单，其中包含指向该页面上锚点的链接。

我在网上找到了以下适用于常规锚链接<a href="#...">的脚本：

$('a[href^="#"]').bind('click.smoothscroll', function (e) {
   e.preventDefault();

   var target = this.hash,
   $target = $(target);

   $('html, body').stop().animate({
      'scrollTop': $taeget.offset().top-60 
   }, 4000, 'swing', function () {
      window.location.hash = target;
   });
});

小提琴的链接：http://jsfiddle.net/2nT8M/5/

小提琴似乎不起作用，但是代码在我的网站上确实有效...

我的问题：

• 如何让脚本正常工作（显然）？
• 是否可以根据我的场景的需要使用不仅包含锚点 ID 的链接？

Answer 1

这是一个有效的小提琴：http://jsfiddle.net/2nT8M/7/

如果你想滚动到一个 id 等于你的锚的 #-part 的元素，你可以像这样访问它：

HTML：

<div id="one"><a class="link" href="da#test">TEST</a></div>
<a id="test">ANCHOR</a>
<div id="two"><a class="link" href="ws#test2">TEST2</a></div>
<a id="test2">ANCHOR</a>

只需给一个元素（在本例中为 ANCHOR）与您的 href 的#-part 相同的 ID。还给所有可点击的 anachors 一个 class="link" 例如

如果你检查我的小提琴，你会看到以下 JS：

$('.link').on('click', function(event) {
  event.preventDefault();
  var target = $(this).attr('href');
  target = $('#' + target.split('#')[1]);
  if( target.length ) {
    $('html, body').animate({
        scrollTop: target.offset().top
    }, 1000);
  }
});

这样它会获取您单击的每个锚点的 #-Part 并滚动到具有相同 ID 的元素。

一些细节：

target.split('#')[1]

这部分取之前保存在目标中的href字符串，并在'#'处将其分成两部分。第一个锚的第一部分是“da”，第二部分是“测试”。您想要“测试”，因此您可以使用 [1] （它是一个数组）访问它。

现在剩下要做的就是在它前面放一个“#”并将其用作选择器：

target = $('#' + target.split('#')[1]);

$('#test') 现在是您要滚动到的目标。