1

サブメニュー付きのシンプルなナビゲーション メニューがあります。サブメニューのリンクが同じページ上でクリックされると、ウィンドウは jQuery を使用してそれぞれのアンカーまでスクロールします。

サブメニュー リスト項目の例を次に示します。

<li><a href="page.html#some-anchor" onclick="clickScroll('#some-anchor');"><span>foo</span></a></li>

対応するアンカーは次のようになります。

<a class="hidden-anchor" id="some-anchor" name="some-anchor"></a>

JavaScript 関数:

function clickScroll(dest) {
    $('html, body').stop().animate({
        scrollTop: $(dest).offset().top
    }, 1000);
}

すべて問題なく動作しますが、以前の多くの人と同じように、インライン イベント ハンドラは最近では悪い習慣であると読んでいます。

関数を変更して onclick 呼び出しを不要にするにはどうすればよいですか? 各サブメニュー リンクは異なるアンカーに対応していることに注意してください。

4

3 に答える 3

2

ハッシュを持つすべてのアンカーを同じ ID を持つ対応するアンカーにスクロールすると仮定すると、すべてのアンカーを#ループし、ハッシュを解析して同じ ID にスクロールできます。

$('a').each(function() {
    if ( this.hash ) {
        $(this).click(function(e) {
            $('html,body').animate({ scrollTop: $(this.hash).offset().top }, 1000);
            e.preventDefault();
        });
     }
});

http://jsfiddle.net/nGfW5/

この機能を特定のアンカーに限定したい場合は、クラスを追加してセレクターに挿入します。$('a.hashlink').each(

于 2012-08-22T07:45:33.700 に答える
1

イベント ハンドラーを使用する: http://api.jquery.com/on/

<li><a id="some-scroll-source" href="page.html#some-anchor"><span>foo</span></a></li>

<a class="hidden-anchor" id="some-anchor" name="some-anchor"></a>

(function () {
    function clickScroll() {
        var dest = $('#' + ($(this).attr('href').split('#')[1]));
        $('html, body').stop().animate({
            scrollTop: $(dest).offset().top
        }, 1000);
    }

    $('#some-scroll-source').on('click', clickScroll);;
}());
于 2012-08-22T07:46:24.760 に答える
0

これを試して：

$('li a').each (function () {
    $(this).click(function () {
        $('html, body').stop().animate({
           scrollTop: $(this.hash).offset().top
        }, 1000);
    });
});
于 2012-08-22T07:44:32.217 に答える