Question

我对jQuery Mobile和网址链接有一点问题。

当页面加载时，jquery throw事件工作正常后，然后jquery执行代码并将页面移动到页面顶部。 *我的问题不是在同一页面中链接锚点，而是使用url链接另一个页面，例如：example_jquery.html#wopwop

我写了一个小例子，看看是不是有效（你可以在任何浏览器中测试）：

<html>
  <head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css">
  </head>
  <body>
    <div data-role="page">
        <h1>wopwop</h1>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <a id="wopwop"></a>
        <h1>wopwop</h1>
    </div>
  </body>

我在stackoverflow中编写了一个补丁：

<script type="text/javascript">
  setTimeout(function(){
    if(location.hash  == "#wopwop"){
      $.mobile.silentScroll($('#wopwop').get(0).offsetTop);
    }
  }, 700);
</script>

但我不认为是解决方案，你知道如何使这项工作吗？

THX。抱歉我的英语不好

Answer 1

显示页面时jQuery Mobile的默认行为是在显示页面时滚动到顶部。滚动的值始终为0并存储在$.mobile.defaultHomeScroll。

您需要在任何页面事件上覆盖此值，但在完全显示页面并完成转换之前。

if (location.hash == "#wopwop") { 
  $.mobile.defaultHomeScroll = $('#wopwop').offset().top; 
}

这将强制在页面中滚动到wopwop div的偏移量而不滚动到顶部然后再回到该div。

Answer 2

$(document).ready(function(){
    $('html, body').animate({ scrollTop: $("#wopwop").offset().top }, 7000);
});

防止页面滚动到顶部

2 个答案: