0

私のサイトには固定ナビゲーション バーがあり、ハッシュ (www.somesite.com/a_page#some_hash) を使用してページ上の特定の要素にジャンプすると問題が発生します。ページがハッシュされた要素にジャンプすると、固定されたナビゲーション バーが要素の一部を覆います。ページがオフセットのある要素にスクロールするようにしようとしています:

function getHash() {
    var hash = window.location.hash;
    return hash; 
}

$(document).ready(function(){
    if (getHash()) {
        $(getHash()).fadeOut(300).fadeIn(300)
            .fadeOut(300).fadeIn(300)
            .fadeOut(300).fadeIn(300);
        scrollTo( 0, $(getHash()).offset().top + 200);
    }
})

さて、このscrollTo部分は何らかの理由で発砲していません。そのすぐ上の部分（fadeOut＆fadeIn部分）です。scrollTo( 0, $(getHash()).offset().top - 200);コンソールでscrollTo 行を使用すると、正常に機能します。リンクにハッシュを含むページをロードするとスクロールしないのはなぜですか? あらゆるご意見をお待ちしております。

4

2 に答える 2

0

ハッシュは大きな問題を引き起こしているようです。特に、現在のページを参照するハッシュリンクはページをリロードしないためです。その結果、ロードされなかった新しいコンテンツ。ハッシュを取り除き、クエリパラメータを使用して、ハッシュに関連するすべての問題を単純化することにしました。

私のURLは次のようになります：

www.some_site.com/some_page?element=3434

次に、このクエリを使用して要素を検索し、オフセットを付けてスクロールします。

function getUrlVars() {
    var vars = {};
    var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
        vars[key] = value;
    });
    return vars;
}

$(document).ready(function(){
    var post_url_param = getUrlVars()["element"];
    var hashed_element_id = '#' + post_url_param;
    if (post_url_param) { 
            $(hashed_post_id).fadeOut(300).fadeIn(300).fadeOut(300).fadeIn(300).fadeOut(300).fadeIn(300);
            scrollTo( 0, $(hashed_post_id).offset().top - 250);         
    }
})
于 2012-09-22T16:58:57.400 に答える
0

href 値がハッシュタグで始まるリンクのデフォルト機能をオーバーライドする関数はどうですか? それはあなたが興味を持っているものですか？

$(document).ready(function() {
    $('a[href^="#"]').on('click', function(e) {
        // prevent the default behavior so your named anchors don't cause
        // a parent with an overflow to 'slide-under' it's parent.
        e.preventDefault();  
        $('html, body').animate({ scrollTop: $($(this).attr('href')).position().top }, 'slow');
    });
});​

フィドルの概念実証

于 2012-09-22T16:52:36.517 に答える