Animate scrollTop不能與iScroll配合使用

Question

我在這個項目上發佈了幾個問題我正在處理這個問題，這是我的最新問題！

我在頁面A上設置了一個單擊事件，將錨標記的ID傳遞給頁面B，以便我可以將它用作scrollTop動畫的標記。我還設置了iScroll以允許在頁面上滾動而不影響底部的固定導航。

iScroll在頁面A上正常工作，scrollTop在頁面B上正常工作。當我嘗試向頁面B添加iScroll時，它會干擾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 
      }, 
     }); 
    } 
}); 

Answer 1

所以，我終於找到了一個辦法做到這一點（我花了年齡，但我到了那裏！）在任何情況下，下面的其他更新遇到此！

而不是使用scrollTop動畫來滾動頁面我遇到了iScroll自己的函數ScrollToElement，我首先得到它的工作，但後來意識到我的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號，使用一個簡單的替換我能夠改變值b eing傳遞並隨後獲得scrollToElement的工作！