Question

我在使用它时遇到一些麻烦。我在页面上有几个锚标签，它们使用scrollTop作为动画。 HTML示例

链路

<a id="TOS" href="#Svc">What are your terms of service?</a>

和目标

<div class="tabWrapp" name="TOS" id="Svc">
<!-- /tos tabWrapp --></div>

和jquery

$('a#TOS').bind('click',function() {
     var pos = $('#Svc').offset().top;
     $('html,body').animate({scrollTop : pos}, 500);
     return false;  //stops navigation from adding the id to the url
   });

现在，在同一页面上有30多个这样的内容变得非常臃肿。我是否可以修改代码以将类应用于锚点并从URL中创建变量，如此

$('.foo').bind('click', function() {
var href = (this).attr('ID');
var pos = href.offset().top;
$('html,body').animate9{scrollTop : pos}, 500);
return false;
});

问题我正在将目标锁定在href var中，然后将其置于pos var ... thx

Answer 1

您可以为所有这些链接提供相同的类，如下所示：

<a class="scrollTo" href="#Svc">What are your terms of service?</a>

然后让你的函数绑定到该类，如下所示：

$('a.scrollTo').bind('click',function() {
  var pos = $(this.hash).offset().top;
  $('html,body').animate({scrollTop : pos}, 500);
  return false;
});

这会绑定到所有链接，但会使用您点击的链接的.hash来获取scrollTop目标。

Answer 2

如果我理解你的意思，是的，你可以。你必须在javascript中使用哈希函数。

所以对于你的标记，如果你有

<a class="foo" id="TOS" href="#Svc">What are your terms of service?</a>

这个JS会提醒“#Svc”：

$('a.foo').click(function() {
     alert(this.hash);
   });

所以在你的例子中，用它来制作：

$('a.foo').click(function() {
  var pos = $(this.hash).offset().top;
  $('html,body').animate({scrollTop : pos}, 500);
  return false;
});

顺便说一下，你可以使用

.click(function() {});

作为

的快捷方式

.bind('click', function() {});

更多详情here

Answer 3

我之前没有使用过这种ID，但也许您可以尝试使用title代替？然后你就可以在$(my_title).offset().top之类的选择器中使用它。希望有所帮助。

Answer 4

您必须先按Id找到元素：

$('.foo').bind('click', function() {
  var href = $(this).attr('ID');
  var pos = $('#'+href).offset().top;
  $('html,body').animate({scrollTop : pos}, 500);
  return false;
});

在$('#element')周围添加href应该这样做，不是吗？

Answer 5

试试这个：

$('a[ID]').bind('click', function() {
var href = $(this).attr('href');
var pos = $(href).offset().top;
$('html,body').animate({ scrollTop : pos}, 500);
return false;
});

为我工作。我调整了href var。很确定就是这样。 a[ID]作为选择器会定位任何带ID的锚点。

如何使jQuery .click函数更具可伸缩性

5 个答案: