Bootstrap 3選項卡-另一個頁面的鏈接

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（）;

（ 如何防止錨點跳動？ ）

上面的方法不能解決問題，因為我相信preventDefault不適用於更新location.hash （ 如何在不跳轉文檔的情況下更新window.location.hash？ ）。

或者，您可以使用scrollTop方法，但是使用此方法可能會暫時看到滾動跳轉：

$（“ body”）。scrollTop（0）;

在現代瀏覽器中，您可以使用History Api（ 如何在不跳文檔的情況下更新window.location.hash？ ）。

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/