1

wordpressページでscrollTo jQueryプラグインを使用していますが、「ページ」ボタンリンクがクリックされるたびにページがスクロールダウンするのを防ぐ方法があるのだろうか?

http://www.missbee.se/missBeev1/?page_id=5#page1

ここに私のコードがあります、

$(function() {

var $target = $('#mask');
    $('#btn1').click(function() {
        $target.scrollTo($('#page1'),500);
        });
        $('#btn2').click(function() {
        $target.scrollTo($('#page2'),500);
        });
        $('#btn3').click(function() {
        $target.scrollTo($('#page3'),500);
        });
        $('#btn4').click(function() {
        $target.scrollTo($('#page4'),500);
        });
        $('#btn5').click(function() {
        $target.scrollTo($('#page5'),500);
        });

});
4

2 に答える 2

2

ページが「ジャンプ」する理由は、リンクをクリックしたときに使用される ID に実際に移動しているためです。

これを解決するには、各呼び出しを次のように変更するだけです。

$('#btn1').click(function(e){
    e.preventDefault();
    $target.scrollTo($('#page1'),500);
});

匿名関数に渡される 'e' は、クリック イベントそのものです。e.preventDefault() は、缶に書かれていることを正確に実行します... デフォルトのアクションが起動されないようにします - この場合、リンクで指定された href に移動します。

ちなみに、次のように、リンクごとに個別の関数を使用するのではなく、スクリプトを 1 つの関数にまとめることができます。

$('#nav a').click(function(e){
    e.preventDefault();
    var href = $(this).attr('href');
    $target.scrollTo($(href),500);
});

この 1 つの関数は、リンクごとに個別の関数を記述するのではなく、クリックされたリンクからターゲットの href を取得するため、すべてのリンクを 1 つの関数で処理できます。

それが役立つことを願っています。

于 2012-07-24T08:21:10.147 に答える
0

達成しようとしている目的のために、jQuery UI タブを使用することをお勧めします。例と情報については、 http://jqueryui.com/demos/tabs/を参照してください。

于 2012-07-24T08:17:14.903 に答える