1

ユーザーが戻るボタンを押すと、onhashchangeイベントを使用してFAQページのアンカーリンクに自動的にスクロールしました。

スクロールが機能しない場合に進むボタンが押されている場合を除いて、正常に機能します。

なぜこれが起こるのか理解できませんでした。なぜこれが起こるのか誰かが知っていますか？

デモページ：http ：//static.nemesisdesign.net/hashchange-issue/index.html （問題を再現するには、左側の列のリンクをクリックしてから、戻るボタンを数回押してから、進むボタンを押してください）

これは、スクロールを行うコードの一部です。

// if browser supports onhashchange event
if ("onhashchange" in window){
    $(window).bind('hashchange', function(e){
        e.preventDefault();
        var href = (location.hash != '') ? location.hash : '#container'
        scrollToFaq(href);
        return false;
    });
}

scrollToFaq = function(href){
    // scroll
    $('html, body').animate(
        // scroll to clicked item
        {scrollTop: $(href).offset().top},
        400, // duration in ms
        function(){
            if(href != '#container'){
                location.hash = href.replace('#',''); // update hash
            }
            // show back button if necessary
            if($(window).scrollTop() > 60){
                // onclick back to top button
                $('#back-top').fadeIn();
            }
        }
    );
}

// when clicking on a faq menu item
$('#faqmenu a').click(function(e){
    // prevent default behaviour
    e.preventDefault();
    // cache href attribute
    scrollToFaq($(this).attr('href'));
});
4

2 に答える 2

4

戻るボタンと進むボタンを使用するe.preventDefault();と、onhashchangeイベントハンドラー内に関係なく、ブラウザーはデフォルトのスクロールアクションを実行するようです。

基本的に、これは戻るボタンと進むボタンを使用するときにブラウザがジャンプするのを止めることはありません。

if ("onhashchange" in window){
    $(window).bind('hashchange', function(e){
        e.preventDefault();
        return false;
    });
}

私が考えることができる最も単純なハックは、ハッシュに存在しないIDを使用することです（ジャンプしないように）。

たとえば、参照<div id="a">にはを使用できます<a href="#xxx_a">。次にxxx_、JavaScriptでパーツを削除するだけです。

ただし、欠点は、JavaScriptが無効になっているユーザー、およびをサポートしていないブラウザのリンクのデフォルトの動作を破ることですonhashchange。

このjsFiddleをチェックして、実際の例を確認できます

于 2012-05-29T15:36:15.153 に答える
2

別の方法は、ドキュメントの準備ができたら、javascriptでid属性を削除/変更することです。そうすれば、うまく機能が低下し、ここで発生しているデフォルトのスクロール動作をバイパスできます...

于 2012-06-21T21:40:38.607 に答える