2

すべてのサブページを含む複数の (html5) セクションを持つ 1 ページの Web サイトを作成したいと考えています。固定ナビゲーションがあります。以下に、いくつかの要件を示します。

  • ナビゲーション リンク (例: #home、#about-me) がクリックされたときに、スムーズにセクションにスクロールするようにしたい
  • domain.com/#about-me のように URL にハッシュを使用したい
  • ユーザーがブラウザから戻る/進むボタンを使用できるようにして、使用するとそのセクションにスムーズにスクロールできるようにしたい
  • URL domain.com/#about-me がすぐにロードされたときに、上から #about-me セクションまでスムーズにスクロールしたい。

私は何日もこれを理解しようとしてきました。BBQ プラグインのようなさまざまなプラグインを使って、これをゼロからやってみました。私はそれを理解できませんでした。しかし、少し学んだので、もう一度ゼロから始めることにしました。軽量であるため、プラグインなしで自分で作成することを好みます。ただし、プラグインを自分で作成するのが面倒な場合は、プラグインを使用してもまったく問題ありません。

今、私はこのHTML、単純なナビゲーションを持っています:

<nav>
    <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#about-me">About me</a></li>
        <li><a href="#portfolio">Portfolio</a></li>
        <li><a href="#contact">Contact</a></li>
    </ul>
</nav>

およびセクション:

<div id="content-wrapper">
    <section id="home">
        <div>content...</div>
    </section>
    <section id="about-me">
        <div>content...</div>
    </section>
    etc...
</div>

jQuery の部分は次のとおりです。

// Function to check if section exists
function isSection(section){
    if($('section'+section).length > 0){
        return true;
    }
    else{
        return false;
    }
}

// Scroll function
function scrollToSection(section){
    var offset = $(section).offset().top;
    $('html, body').stop().animate({
        scrollTop: offset
    }, 600);
}

// The Click() function
$('nav ul a').click(function(){
    var section = $(this).attr('href');
    if(isSection(section)){
        scrollToSection(section);
    }
})

すぐに私は問題に遭遇します。ハッシュは変更されますが、すぐにセクションにジャンプし、1 秒後にとにかくスクロール アニメーションを実行します (以前の開始位置から)。preventDefault() を使用することもできますが (これにより、完全に滑らかなアニメーションが生成されます)、ハッシュは変更されません。ブラウザの履歴が機能するようにハッシュを変更するのは良いことですが、履歴ボタンを押してもスクロールは発生しません。

最上位の要件を念頭に置いて、ここからどのように進めますか? 推奨事項とできれば例はありますか？

BBQ hashchangeプラグインは、これらすべてに非常に適していると聞きました。これをどのように実装しますか？ドキュメントは私の要件を十分に考慮していません。

4

1 に答える 1

2

アニメーションが完了したら、手動で set location.hash を使用して URL を変更できます。まず、preventDefault を使用してアニメーション化します。行きたい場所までスクロールしたら、位置情報を使用できます。

// Scroll function
function scrollToSection(section){
    var offset = $(section).offset().top;
    $('html, body').stop().animate({
        scrollTop: offset
    }, 600, function(){
       window.location.hash = section;
    });
}

// The Click() function
$('nav ul a').click(function(event){
    event.preventDefault();
    var section = $(this).attr('href');
    if(isSection(section)){
        scrollToSection(section);
    }
    return false;
})​

http://jsfiddle.net/adamzr/p5L57/を参照してください

もう 1 つの方法は、リンクが通常どおりにハッシュを変更できるようにすることです。ただし、onhashchange イベントを使用して、ハッシュが変更されたときにスクロールを行うことができます。

クリック ハンドラーを次のように置き換えます。

function locationHashChanged(event) {
    event.preventDefault();
    var section = location.hash;
    if(isSection(section)){
        scrollToSection(section);
    }
}

window.onhashchange = locationHashChanged;

http://jsfiddle.net/adamzr/XDWuSを参照してください

このアプローチの方が優れていますが、jsfiddle ハッシュで使用した方法は、nav を使用してセクションに移動する以外には機能しません。ページに他のハッシュがあり、それらに対してもスクロールを機能させたい場合は、セクション固有のコードを削除するだけです。

また、onhashchange イベントをサポートするブラウザでのみ動作します。http://caniuse.com/hashchange

于 2012-11-15T22:31:17.240 に答える