1

この関数を使用して、目的のコンテナーまでスクロールします。

function scrolear(destino){
    var stop = $(destino).offset().top;
    var delay = 1000;
    $('body').animate({scrollTop: stop+'px'}, delay);
    return true;
}

次のように使用すると問題が発生します。

<a href="#" onclick="scrolear('#container');">go</a>

href="#"は body をページの先頭にスクロールするためです。

これを防ぐ方法はありますか？

4

4 に答える 4

2

アップデート

サイトが正しく機能するために JavaScript に依存するのではなく、JavaScript を使用してサイトを段階的に強化することを検討してください。あなたの例では、これは次の方法で達成できます。

HTML: 

<a href="#container">go</a>

Javascript: 

$(function() {
  $('a[href^="#"]').click(function(e) {
    e.preventDefault();
    var target = $(this).attr('href');
    var stop = $(target).offset().top;
    var delay = 1000;
    $('body').animate({scrollTop: stop + 'px'}, delay);
  });
});

これにより、href が # で始まるすべてのリンクのクリックが傍受され、アニメーションが追加されます。ユーザーが JavaScript を有効にしていない場合でも、リンクをクリックすると正しい場所に移動します。

お役に立てれば！

于 2011-11-15T11:48:48.370 に答える
1 
<a href="javascript:void(0);" onclick="scrolear('#container');">go</a>

これは javascript 関数を href に割り当てるだけで、まったく何もしないため、次のようなページスクロールは発生しません#

于 2011-11-15T11:52:47.743 に答える
1

あなたはjqueryを使用しているので、私はそうします

<a href="#">go</a>

$("a").click(function() {
    e.preventDefault(); // cancel's the '#' click event
    scrolear('#container');
});
于 2011-11-15T11:50:21.333 に答える
0

@rich.okelly からの正解

function scrollTosec(){
     $('a[href^="#"]').click(function(e) {
            e.preventDefault();
            var target = $(this).attr('href');
            var stop = $(target).offset().top;
            var delay = 200;
            $('body').animate({scrollTop: stop + 'px'}, delay);
          });
}
于 2013-11-14T19:27:19.780 に答える