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 动画来滚动页面，而是遇到了 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 工作！

于 2013-03-06T16:45:32.283 回答