Question

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

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

在我的场景中，链接看起来像这样：

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

我有一个全球导航栏，其中包含指向＆＃34; some-page＆＃34;并将菜单条目悬停在一个下拉列表中，打开指向该页面上锚点的链接。

我在网上发现以下脚本适用于常规锚链接<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>

只需为您的href提供与您的＃-part相同的ID（在本例中为ANCHOR）。同时给所有可点击的aachors一个class =＆＃34; link＆＃34; e.g。

如果你检查我的小提琴，你会看到以下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字符串，并在＆＃39;＃＆＃39;中将其分成两部分。第一个锚的第一部分是＆＃39; da＆＃39;第二部分是“测试”。你想要＆＃39;测试＆＃39;因此你可以用[1]（它的数组）来访问它。

现在剩下要做的就是放一个＆＃39;＃＆＃39;在它面前并将其用作选择器：

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

$（＆＃39; #test＆＃39;）现在是您要滚动到的目标。

光滑的锚点滚动与网址

1 个答案: