2013-03-04 2 views
2

Я опубликовал несколько вопросов по этому проекту, над которым я работаю, и это моя последняя проблема!Анимация scrollTop не работает с iScroll

У меня есть событие click, настроенное на странице A, чтобы передать идентификатор тега привязки на страницу B, чтобы я мог использовать его в качестве маркера анимации scrollTop. У меня также есть iScroll, чтобы разрешить прокрутку на странице, не затрагивая фиксированную навигацию внизу.

iScroll отлично работает на странице A, scrollTop отлично работает на стр. B. Когда я пытаюсь добавить iScroll на страницу B, однако это мешает прокруткеTop и заставляет его перестать работать. Я пробовал отлаживать, и, похоже, это, в частности, оболочка 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 
      }, 
     }); 
    } 
}); 

ответ

3

Так что я наконец-то нашел способ сделать это (взял меня возрастов, но я получил там!) Обновление ниже в случае, если кто-то приходит через это!

Вместо использования анимации 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), а scrollToElement нужен идентификатор, который должен быть в следующем формате: # ID, используя простую замену, я смог изменить значение b eing прошел через и затем заставил scrollToElement работать!

+1

Вау ... Я искал более часа для этого ... Спасибо миллион. –

Смежные вопросы