停止默认的safari搜索栏，在按下锚点链接后重新出现

Question

我有一个单页网站。

在小屏幕格式中，它是一个长列，我使用锚链接进行导航。

<a href="#destination>Go to destination</a>

-

<section id="destination">Link to here:</section>

非常基本。

在移动版Safari中，当您滚动时 - 地址栏和其他界面的内容会滑落，为您提供更多空间。当您按下锚点链接时，它会按预期将该部分带到窗口顶部...但似乎也会重置下面的地址栏和界面按钮的默认值。

是否有一种已知方法可以阻止此行为？

是否存在，所以我可以使用后退按钮 - 或者有充分理由？

VS

修改

自发布以来，我一直在为一个偏移而愚弄。

  $(".global-menu a").on('click', function(event) {

    // instead, animate the scroll
    $('html,body').animate({
      // find how far it is from the top - then - don't go all that way
      // offset it a bit... 
      scrollTop:$(this.hash).offset().top - 10
    }, 0); // I don't want an animation... but this is working for reasons I don't understand.

    event.preventDefault();

  });

Answer 1

这是我拼凑的小提琴：http://fiddle.jshell.net/pLjtN/show/

和JS：

$('.global-menu').on('click', 'a', function(e){
    var href = $(this).attr('href'),
        title = href.substring(1);

    // Prevent default behavior
    e.preventDefault();

    // Update location via history to mimic browser - We should probably check for history support
    history.replaceState({}, title, href);

    // Scroll to element
    $(href).get(0).scrollIntoView(true);
});

单击内部链接时，replaceState可以模仿浏览器功能 - 如果需要，可以删除它。

scrollIntoView是一种原生DOM方法。我更喜欢设置scrollTop，因为它避免了必须计算元素的偏移量。此外，我更喜欢它而不是jQuery动画（出于性能原因）。

如果你想将它限制在iOS，你可以用一个简单的userAgent检查包装整个事件处理程序，如下所示：

if (/(iP(od|ad|hone))/g.test(navigator.userAgent)) {
    ... code goes here ...
}

以下是完整的小提琴：http://jsfiddle.net/pLjtN/

希望这有帮助！ ：）