Question

我有以下代码，可以让我链接到另一个页面的特定标签。唯一的问题是，当单击链接时，页面将被加载，然后向下滚动到DIV所在的位置。我希望它只是将页面加载到顶部。

任何帮助都将不胜感激。

<script type="text/javascript">
$(function() {
  // Javascript to enable link to tab
  var url = document.location.toString();
  if (url.match('#')) {
    $('.nav-tabs a[href=#'+url.split('#')[1]+']').tab('show') ;
  }

  // Change hash for page-reload
  $('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
    window.location.hash = e.target.hash;
  });
});
</script>

返回带有选项卡的页面的超链接如下。

<a href="../view_mail/#two" class="btn btn-theme">Close</a>

非常感谢，

约翰

Answer 1

可能有更好的方法可以做到这一点，但只需点击一下即可滚动到顶部。

$( "body" ).scrollTop(0);

Answer 2

不幸的是，以下情况可能不起作用：

e.preventDefault（）;

（How to prevent jump on an anchor click?）

以上不会解决问题，因为我认为，preventDefault不适用于更新 location.hash （How can I update window.location.hash without jumping the document?）。

或者您可以使用scrollTop方法，但是您可以使用此方法暂时看到滚动跳转：

$（ “正文”）scrollTop的（0）;

在现代浏览器中，您可以使用历史记录Api（How can I update window.location.hash without jumping the document?）。

Answer 3

如果您阻止默认事件，则哈希不会附加到网址。如果您使用scrollTop“hack”，用户可能会遇到故障。尝试使用历史记录API：

history.pushState(null, null, '#myhash');

if(history.pushState) {
    history.pushState(null, null, '#myhash');
}
else {
    location.hash = '#myhash';
}

我从http://lea.verou.me/2011/05/change-url-hash-without-page-jump/

得到了这个

Bootstrap 3选项卡 - 从另一页链接

3 个答案: