0

ページを作成しています。私は次のHTMLを持っています:

        <ul id="nav">
            <li><a href="#section1">Link</a></li>
            <li><a href="#section2">Link</a></li>
            <li><a href="#section3">Link</a></li>
            <li><a href="#section4">Link</a></li>
            <li><a href="#section5">Link</a></li>
            <li><a href="#section6">Link</a></li>
        </ul>

        <div class="section">
            <p>Content</p>
        </div>

        <div class="section" id="section1">
            <p>Content</p>
        </div>

        <div class="section">
            <p>Content</p>
        </div>

        <div class="section" id="section2">
            <p>Content</p>
        </div>

        <div class="section">
            <p>Content</p>
        </div>

        <div class="section" id="section3">
            <p>Content</p>
        </div>

        <div class="section">
            <p>Content</p>
        </div>

        <div class="section" id="section4">
            <p>Content</p>
        </div>

        <div class="section">
            <p>Content</p>
        </div>

        <div class="section" id="section5">
            <p>Content</p>
        </div>

        <div class="section">
            <p>Content</p>
        </div>

        <div class="section" id="section6">
            <p>Content</p>
        </div>

私が達成したいのは、リンクがクリックされたときです。jQuery を使用して、リンクの href と同じ ID を持つ div を見つけ、ページをその div までスクロールします。誰かが私を正しい方向に向けることができますか? 私が苦労しているのは、IDをhrefに一致させる方法です。

どうもありがとう。

4

3 に答える 3

3

各アンカー タグにクリック イベントを追加します。attr関数を使用して、選択した要素の href を取得します。

次に、アニメーション機能を使用して、この要素までスクロールしました。

$(function(){
    $('#nav li a').click(function(){
        var divID = $(this).attr('href');
        $('html,body').animate({
            scrollTop: $(divID).offset().top 
        }, {
            duration: 'slow', 
            easing: 'swing'
        }); 
    }); 
});
于 2011-02-14T15:10:10.297 に答える
1

あなたはこの方法でこれを達成することができます：

$('#nav li a').click(function(){
    //Scroll to targetID offsetTop.. or using the scrollTo plugin, scrolling to $($(this).attr('href'))
})

scrollToプラグイン

于 2011-02-14T15:05:56.323 に答える
1

このようなことを試してください：

$('#nav a').click(function(){
  $($(this).attr('href')).whatyouwant();
});
于 2011-02-14T15:00:09.057 に答える