7

情報のインデックスにスムーズなスクロールを実装しようとしました。このjsFiddlehttp://jsfiddle.net/9SDLw/を見ましたが、動作させることができません。コードがHTMLドキュメントなどのどこに挿入されるかは重要ですか？

これが私のコードです：

JS（ドキュメントの先頭）：

<script type="text/javascript">
$('a').click(function(){
    $('html, body').animate({
        scrollTop: $( $(this).attr('href') ).offset().top
    }, 500);
    return false;
});​
</script>

マークアップ：

リンク

<a href = "#G" rel = "" id="G" class="anchorLink">G</a><br />

アンカー

<a name = "G" id="G"><span class = "letters">G</span></a><br />

ここで何が欠けていますか？

4

2 に答える 2

10

jsBin デモ

<ul id="links">
    <li><a href="#a">Go to a</a></li>
    <li><a href="#b">Go to b</a></li>
</ul>

そして、あなたの文書のどこかより...

<h2 id="a">Article "a"</h2>
Lorem......
<h2 id="b">Article "b"</h2>
Lorem......

jQ:

$('#links a').click(function( e ){  
    e.preventDefault();
    var targetId = $(this).attr("href");
    var top = $(targetId).offset().top;
    $('html, body').stop().animate({scrollTop: top }, 1500);
});

上記が行うことは、取得したアンカーhrefを使用し、それを jQuery の# (id) セレクターとして使用することです。その ID 要素を見つけ、それを一番上offsetにして、最後にページをアニメーション化します。

于 2012-05-11T17:49:31.037 に答える
-1

すべてのコードをラップする必要があります

$(document).ready(function(){ ... });

あるいは単に

$(function(){ ... });
于 2013-06-27T03:25:09.227 に答える