0

ページ アンカーへの 6 つのリンクのリストがあり、それらへのスクロールをアニメーション化したいと考えています。

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 に答える