防止从锚标签滚动

Question

我正在使用 jQuery 进行简单的导航，通过在页面上显示或隐藏内容窗格来加载内容窗格。我正在使用锚标签来确定要显示的窗格。我还使用“就绪”函数在页面加载时显示#hash 元素。非常基本：

$(document).ready(function() {
  $('#video_form_content > div').hide();
  var showTab = window.location.hash || "#basic-info";
  $(showTab).show();
}

$('#video_form_tabs li').on('click', function() {
    $('#video_form_content > div').hide();
    var target = $(this).children('a').attr('href');
    $(target).show();
})

但是，当点击元素时，页面会跳转到目标div 的顶部。我不希望这种跳转，但我确实希望保留锚标记的默认功能，因为我希望将哈希添加到 URL，以便刷新会重新打开同一个选项卡。

这是我尝试过的

• 将$(window).scrollTop(0) 添加到点击事件。我认为可能，但此事件在锚元素的实际导航之前触发，因此它会立即撤消。
• 将$(window).scrollTop(0) 添加到$(document).ready() 但是，单击同一页面的锚点时不会触发此侦听器。
• 将window.location.hash = target 或window.location.href = target 添加到点击事件。但是，这仍然会导致页面重新提交，并且仍然“跳转”。
• 将return false 添加到函数中。这可以防止将哈希添加到 URL，这是非常受欢迎的。

这真的让我很困惑，任何帮助将不胜感激。

Answer 1

如果你想在url中保留hash，你必须手动添加它

e.preventDefault(); // stop browser from following href
var url = $(this).prop('href'); // get href
var hash = url.split('#'); // get the hash-part
if(hash.length > 1) location.hash = hash[1]; // rewrite the url

我只在 Chrome 中对此进行了测试，它在那里运行良好。

Answer 2

我的方法是向可点击元素添加一个通用类，然后执行一个超时为 0 的 setTimeout。在我的例子中，我将“top”类添加到我的可点击元素中。

$(".top").click(function(){
    setTimeout(function(){
        window.scrollTo(0, 0);
    }, 0);
})

您可以随意设置 x 和 y 坐标：

scrollTo(X, Y);

快速简单！

这样做可以保持当前滚动位置：

$(".top").click(function(){
    var position = $(document).scrollTop();
    setTimeout(function(){
        window.scrollTo(0, position);
    }, 0);
})

Answer 3

用#basic-info-TAB 之类的东西识别你的目标divs，然后将"-TAB" 添加到target 变量中。

Answer 4

您应该将事件附加到锚点并取消默认事件处理程序：

$(document).ready(function() {
  $('#video_form_content > div').hide();
  var showTab = window.location.hash || "#basic-info";
  $(showTab).show();
}

$('#video_form_tabs li a').on('click', function(e) {
    e.preventDefault(); // stop browser from following href
    $('#video_form_content > div').hide();
    var target = $(this).attr('href');
    $(target).show();
})