Question

我在JQ中有一个相当强烈（但非常简单）的UI，UI需要定位才能定位。

问题出在iOS / Chrome（webkit）和其他各种浏览器中。大约50％的时间点击锚点时，a标记会触发Chrome地址栏向下滑动，再次按下它就会消失。抵消是严重的没有bueno。

正如您所料，这会弄乱UI定位，地址栏偏移很难预测，因为它是设备+屏幕尺寸的反应。

我认为这是一个错误，当第一个片段被使用时，之前没有或者片段状态的改变（新的或改变的）。这些操作或类似操作告诉浏览器＆＃34;点击标记，激活网址栏＆＃34;。

我喜欢这个解决方案（CSS），但这并没有解决问题，因为地址栏不是可靠地预测的元素（除非我想为一个小问题编写愚蠢的JS）：

https://stackoverflow.com/a/13184714/860715

我正在跳过冗长的全屏幕API，因为并非所有手机都具有该功能。

我现在的测试解决方案是在{}修复用户界面的onclick="return;"标记中添加a。此方法似乎捕获锚点活动并跳过触发地址栏的a标记。

关于各种移动浏览器的UI中更好的解决方案和/或可能的问题的想法。

对于解决方案来说，路易斯·帕特里斯·贝塞特（Louys Patrice Bessette）需要进行一次小编辑：

$(document).ready(function(){
    $("a").on("click", function(e){
      if( $(this).attr("href").substr(0,1) == "#" && $(this).attr("href").length > 1 ){
        var targetPos = $(document).find("a[name='"+$(this).attr("href").substr(1)+"']").offset().top;
        $("html, body").scrollTop(targetPos);
        e.preventDefault();  // this was moved -<-<
    }
});});

Answer 1

当用于滚动页面时，我会阻止锚的默认行为。

$(document).ready(function(){
  $("a").on("click", function(e){

    // It the href attribute begins with # and is not ONLY #
    if( $(this).attr("href").substr(0,1) == "#" && $(this).attr("href").length > 1 ){

      // Prevent the default anchor behavior.
      e.preventDefault();

      // Get the offset of the target a having the name attribute matching the href of the clicked anchor.
      var targetPos = $(document).find("a[name='"+$(this).attr("href").substr(1)+"']").offset().top;

      // Scroll the page to that position.
      $("html, body").scrollTop(targetPos);
    }
  });
});

解决移动网络锚点的不稳定问题

1 个答案: