Animate scrollTop not working with iScroll

Question

I've posted a few questions on this project I'm working on and this is my latest problem!

I have a click event set up on page A to pass the ID of the anchor tag across to page B so I can use it as a marker for a scrollTop animation. I also have iScroll set up to allow scrolling on the page without affecting the fixed navigation on the bottom.

iScroll works fine on page A, scrollTop works fine on page B. When I try and add iScroll to page B however it interferes with the scrollTop and causes it to stop working. I've tried debugging and it seems to be the wrapper div in particular that's causing the issue, this or fact its absolutely positioned. I've tried several different methods of fixing it but I seem to just be going round in circles. Is anyone able to have a look and see if they can spot the error as it's driving me crazy?

Code below!

<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

So I finally found a way to do this (took me ages but I got there!) Update below in case anyone else comes across this!

Instead of using the scrollTop animation to scroll the page I came across iScroll's own function called ScrollToElement, I got it working at first but then realised that my localStorage value was affecting the code and causing it to break. Fixed code is below:

Page A - click event to pass anchor ID to next page

// 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");
});

Page B - receive ID and scroll to element with corresponding 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();

To make this work with localStorage I found I had to alter the value being passed from localStorage slightly, the value being passed across was just the ID minus the # (#ID = ID) and scrollToElement needs the ID to be in the following format a#ID, using a simple replace I was able to alter the value being passed across and subsequent get the scrollToElement to work!