6

上部に従来のナビゲーションがある 1 ページのサイトを作成しています。現在、ページ内を移動するために、リンクをハッシュタグとして設定しています。

<nav>
<a href="#about">About</a>
</nav>
...
<section id="about">...</section>

明らかに、これは機能しますが、about セクションへのジャンプは瞬時に行われ、段階的ではありません。段階的な移行を行うために、非常に単純な実装を探しています。派手なことはしたくない。軸、オフセット、またはその他のオプションはありません。スクロールの遷移を段階的にしたいだけです。私が望む唯一の設定は、スクロールを完了するのにかかる時間です。また、マークアップをほとんど変更したくありません。アンカー タグを使用して HTML ドキュメント内の場所を設定する必要がある JavaScript プラグインをいくつか見てきましたが、それは望ましくありません。このサイトは有望に見えますが、設定方法がわかりません。デモがないので、セットアップ方法がわかりません。私はJavascriptの知識があまりありません。また、ScrollTo プラグインjQuery は複雑すぎます。多くのオプションを備えたプラグインを使用したいと思っていますが、オプションが設定方法を理解するのを妨げないようにしたいだけです。

どんな助けでも大歓迎です！

4

4 に答える 4

16

これは私が見つけた最良の方法です。通常のアンカーを使用するだけで、その機能を拡張します

$('a').click(function() {
    var elementClicked = $(this).attr("href");
    var destination = $(elementClicked).offset().top;
    $("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination-15}, 500);
});

ここにライブの例があります

于 2012-05-01T20:06:55.490 に答える
6

これを行うには、ストレートjqueryを使用しました。

私はそのようなリンクを持っていました - >

<a href="1" class="scrolling">Go to 1</a>

次にjqueryを使用すると、IDが「1」の別のアンカーを持つdivまでスクロールダウンします

$("a.scrolling").click(function(e) {
    e.preventDefault();
    goToByScroll($(this).attr("href"));
});

function goToByScroll(id) {
    $('html,body').animate({scrollTop: $("#"+id).offset().top},'slow');                               
}
于 2012-05-01T20:04:07.340 に答える
2

Javascript には ScrollTo があります。ウィンドウイベントです。ここで確認してください: https://developer.mozilla.org/en/DOM/window.scrollTo

于 2012-05-01T20:05:33.253 に答える
0

このスクロールを効果的に作成する簡単な方法を探しているときに、インターネットでこのコードを見つけました。

html コード:

<a href="#services">Jump to services</a>
<div id="services"></div>

jQuery コード:

$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
    e.preventDefault();

    var target = this.hash,
    $target = $(target);

    $('html, body').stop().animate({
        'scrollTop': $target.offset().top
    }, 900, 'swing', function () {
        window.location.hash = target;
    });
});

});

これはコードソースです。

于 2014-06-02T21:42:25.553 に答える