0

我有一个指向页面锚点的六个链接的列表,我想为它们设置滚动动画。

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");
});
4

1 回答 1

0

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

但是,这甚至都不需要。您想将href属性的内容用作 ID 选择器:

$("html, body").animate({
    scrollTop: $(this.href).offset().top
}, "slow");
于 2013-01-16T19:43:35.207 回答