2

私が取り組んでいるこのプロジェクトに関するいくつかの質問を投稿しましたが、これが私の最新の問題です!

ページ A にクリック イベントを設定してアンカー タグの ID をページ B に渡し、scrollTop アニメーションのマーカーとして使用できるようにします。また、下部の固定ナビゲーションに影響を与えずにページをスクロールできるように iScroll をセットアップしました。

iScroll はページ A で正常に動作し、scrollTop はページ B で正常に動作します。iScroll をページ B に追加しようとすると、scrollTop に干渉し、動作が停止します。私はデバッグを試みましたが、特に問題を引き起こしているのはラッパー div のようです。これまたは事実は絶対に配置されています。私はそれを修正するためにいくつかの異なる方法を試しましたが、ただぐるぐる回っているようです. エラーが私を夢中にさせているので、エラーを見つけられるかどうかを確認できる人はいますか?

以下のコード！

<div id="wrapper">
   <div id="scroller">
      Content   
   </div>
</div>


<div id="footer">
    Content
</div>

#footer { 
    position: fixed;
    z-index: 2;
    bottom: 0; 
    left: 0; 
    width: 100%; 
    padding: 0;  
    height: 65px; 
}
#wrapper { 
    position: absolute; 
    z-index: 1; 
    top: 0; 
    bottom: 90px; 
    left: 0; 
    width: 100%; 
    overflow: auto; 
    color: #696868; 
}
#scroller {
   position:absolute; 
   paddding:0; 
   margin: 0 20px;
}

// Store div ID in local Storage
var storage = window.localStorage;
$("a.scroll_link").click(function(event) {
    event.preventDefault();

    var value = $(this).attr("id");
    storage.setItem("key",value);

    window.location=$(this).attr("href");
});





$(document).ready(function() {
//Retrieve ID from local storage
var value = window.localStorage.getItem("key");
console.info(value);

    //If null then re-define
    if (value != "" && value != "undefined" && value != null) {
        var storage = window.localStorage;
        storage.setItem("key",value);
        var scroll_type = "";

        if ($.browser.webkit) {
            scroll_type = "body";
        } else {
            scroll_type = "html";
        }

        //Scroll to position based on ID
        $(scroll_type)
            .stop()
            .animate({
            //get top-position of target-element and set it as scroll target
            scrollTop: ($("#" + value).offset().top - 25)
            //scrolldelay: 1.5 seconds
        }, {
            duration: 1500,
            complete: function () {
                storage.clear(); //Clear item from local storage
            },
        });
  }
});
4

1 に答える 1

3

だから私はついにこれを行う方法を見つけました（私は何年もかかりましたが、私はそこにたどり着きました！）他の誰かがこれに出くわした場合に備えて、以下を更新してください！

scrollTop アニメーションを使用してページをスクロールする代わりに、 ScrollToElement というiScroll独自の関数に出会いました。最初は機能していましたが、 localStorage の値がコードに影響を与え、コードが壊れていることに気付きました。修正コードは以下です。

ページ A - クリック イベントでアンカー ID を次のページに渡す

// Local storage scrollTo
var storage = window.localStorage;
$("a.scroll_link").click(function(event) {
    event.preventDefault();

    var value = $(this).attr("id");
    storage.setItem("key",value);

    window.location=$(this).attr("href");
});

ページ B - ID を受け取り、対応する ID を持つ要素にスクロールします

//Retrieve ID from local storage
var value = window.localStorage.getItem("key");
value = value.replace(value, "a#" + value);

// Scroll to element after .5 second
setTimeout(function(){
    myScroll.scrollToElement(value, 1500);  
    return false;

}, 500)

// Clear local storage to prevent scrolling on page reload
localStorage.clear();

これを localStorage で機能させるには、localStorage から渡される値を少し変更する必要があることがわかりました。渡される値は ID から # を引いたもの (#ID = ID) であり、scrollToElement では ID を次の形式にする必要があります。 #ID、単純な置換を使用して、渡される値を変更し、その後 scrollToElement を機能させることができました!

于 2013-03-06T16:45:32.283 に答える