javascript - 如何滚动到 jQuery Mobile 中的页面元素？

Question

我有一个很长的 jQuery 移动页面，我想在页面加载后滚动到该页面中途的一个元素。

到目前为止我已经尝试了一些东西，最成功的是:

jQuery(document).bind("mobileinit", function() {
  var target;
  // if there's an element with id 'current_user'
  if ($("#current_user").length > 0) {
    // find this element's offset position
    target = $("#current_user").get(0).offsetTop;
    // scroll the page to that position
    return $.mobile.silentScroll(target);
  }
});

这可以工作，但是当 DOM 完全加载时页面位置会被重置。谁能提出更好的方法？

谢谢

Answer 1

有点晚了，但我认为我有一个可靠的解决方案，不需要 setTimeout() .快速查看代码后，JQM 1.2.0 似乎发出了 silentScroll(0)。在 window.load适用于 iOS 上的无边框视口(viewport)。参见 jquery.mobile-1.2.0.js , 第 9145 行:

    // window load event
    // hide iOS browser chrome on load
    $window.load( $.mobile.silentScroll );

发生的情况是这与对 silentScroll() 的应用调用发生冲突.调用得太早，框架会滚动回到顶部。调用太晚，UI 闪烁。

解决方案是将一次性处理程序绑定(bind)到 'silentscroll'调用 window.scrollTo() 的事件直接( silentScroll() 只不过是一个异步的 window.scrollTo() 而已)。这样，我们捕获了第一个 JQM 发出的 silentScroll(0)并立即滚动到我们的位置。

例如，这是我用于深度链接到命名元素的代码(请务必使用 data-ajax="false" 禁用入站链接上的 ajax 加载)。已知的 anchor 名称是 #unread和 #p<ID> .标题是固定的并使用 #header身份证。

$(document).bind('pageshow',function(e) {
    var $anchor;
    console.log("location.hash="+location.hash);
    if (location.hash == "#unread" || location.hash.substr(0,2) == "#p") {
        // Use anchor name as ID for the element to scroll to.
        $anchor = $(location.hash);
    }
    if ($anchor) {
        // Get y pos of anchor element.
        var pos = $anchor.offset().top;

        // Our header is fixed so offset pos by height.
        pos -= $('#header').outerHeight();

        // Don't use silentScroll() as it interferes with the automatic 
        // silentScroll(0) call done by JQM on page load. Instead, register
        // a one-shot 'silentscroll' handler that performs a plain
        // window.scrollTo() afterward.
        $(document).bind('silentscroll',function(e,data) {
            $(this).unbind(e);
            window.scrollTo(0, pos);
        });
    }
});

不再有 UI 闪烁，而且它似乎可以可靠地工作。