Question

我正在使用jQuery进行简单的导航，通过在页面上显示或隐藏它们来加载内容窗格。我正在使用锚标签来确定要显示的窗格。我还使用“ready”函数在页面加载时显示#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)添加到click事件中。我认为可能，但是这个事件在锚元素的实际导航之前触发，所以它会立即撤消。
将$(window).scrollTop(0)添加到$(document).ready()但是，单击同一页面的锚点时不会触发此侦听器。
向点击事件添加window.location.hash = target或window.location.href = target。但是，这仍然会导致页面重新提交，并且仍然会“跳转”。
将return false添加到该功能。这可以防止将URL添加到URL，这是首选。

这真令我困惑，任何帮助都会非常感激。

Answer 1

如果要在网址中保留哈希值，则必须手动添加

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

使用div之类的内容识别您的目标#basic-info-TAB，然后将"-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();
})

防止从锚标签滚动

4 个答案: