Question

我已经在这个项目上发布了一些我正在研究的问题，这是我最新的问题！

我在页面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
            },
        });
  }
});

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，使用简单的替换，我能够改变传递的值，然后让scrollToElement工作！

动画scrollTop无法使用iScroll

1 个答案: