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

Question

我在 JQ 中有一个相当密集(但非常简单(的 UI，其中需要锚点来定位 UI。

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

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

我认为当使用第一个片段时，这是一个错误，以前没有或片段状态的更改(新的或更改的(。这些操作或类似操作告诉浏览器"点击了标签，激活了网址栏"。

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

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

我跳过了冗长的全屏API，因为并非所有移动设备都具有该功能。

我现在的解决方案是将onclick="return;"添加到锚定 UI 的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);
}
});
});