我有一个指向页面锚点的六个链接的列表,我想为它们设置滚动动画。
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");
});