Question

我有六个链接到页面锚点的列表，我想将滚动设置为动画。

HTML：

<div id="nav">
<table>
<tbody>
<tr>
<td><a href="#one">One</a></td>
<td><a href="#two">Two</a></td>
<td><a href="#three">Three</a></td>
</tr>
<tr>
<td><a href="#four">Four</a></td>
<td><a href="#five">Five</a></td>
<td><a href="#six">Six</a></td>
</tr>
</tbody>
</table>
</div>

jQuery的：

jQuery(document).ready(function ($) {

$("#nav a").click(function(){

// Disable the default behaviour when a user clicks an empty anchor link.
 // (The page jumps to the top instead of // animating)
 event.preventDefault();

// Animate the scrolling motion.
 $("html, body").animate({
scrollTop:this.attr('target').offset().top
 },"slow");
});

});

这不起作用，我收到错误说：

Uncaught TypeError: Object http://url/#one has no method 'attr'

显然我需要重写这一行：

scrollTop:this.attr('target').offset().top

但是如何选择链接的目标以找到偏移量以便我可以设置滚动高度？

解决方案：

最后的答案是有一些错误，可能最值得注意的是缺失的$，如下所述。这是我决定使用的代码：

$("#nav a").click(function(){

// Disable the default behaviour when a user clicks an empty anchor link.
 // (The page jumps to the top instead of // animating)
 event.preventDefault();

// Animate the scrolling motion.
 $("html, body").animate({
scrollTop:($("[name='"+ (this.hash).replace('#', '') +"']").offset().top)
 },"slow");
});

Answer 1

您收到该错误的原因是因为您没有在jQuery中包装您的元素（您的代码中也有其他错误）。

然而，这甚至不需要。您希望将href属性的内容用作ID选择器：

$("html, body").animate({
    scrollTop: $(this.href).offset().top
}, "slow");

选择链接目标

1 个答案: