使用客戶端路由時，如何在頁面內實現鏈接？

Question

我正在使用crossroads.js進行客戶端路由的SPA。 除了一個例外，一切都工作正常。

我在此SPA中有一個很大的頁面，並且我希望能夠使用內部鏈接在頂部提供一個目錄。 過去，我做過這樣的事情：

<ul>
  <li><a href="#Introduction">Introduction</a></li>
  <li><a href="#Chap1">Chapter 1</a></li>
  <li><a href="#Chap2">Chapter 2</a></li>
  <li><a href="#Chap3">Chapter 3</a></li>
</ul>

這些將鏈接到同一頁面中具有相應ID的元素。

但是，由於我正在使用客戶端路由，因此似乎也無法正常工作。 我正在使用此頁面的頁面具有如下網址：

http://myserver.com/#/Books/12/Full

單擊上面的鏈接之一不會將頁面移至屏幕上的正確位置，但會將URL更改為：

http://myserver.com/#Chap2

在保留URL的同時，是否存在處理SPA中內部鏈接的標准方法？

Answer 1

這是一塊

<nav>
  <ul>
    <li data-rel="div1">DIV 1</li>
    <li data-rel="div2">DIV 2</li>
    <li data-rel="div3">DIV 3</li>
  </ul>
</nav>


<div id="div1">


</div>

<div id="div2">


</div>

<div id="div3">


</div>


$(function() {
  $('nav ul li').click(function() {
    $('html, body').animate({ scrollTop: $('#'+$(this).data('rel')).offset().top }, 900); 
  });
});

Answer 2

@mdesdev讓我指出了正確的方向，但這最終為我工作了：

使用SPA，有問題的頁面會在文檔加載后加載，因此我無法使用jQuery文檔就緒功能來添加點擊處理程序。 相反，我創建了以下函數：

function scrollToInternal(target) {
  // #MyContent is the div that needs to be scrolled
  $('#MyContent').scrollTop($(target).position().top);
};

然后在標記中，我使用onclick屬性調用了此函數：

<ul>
  <li><a href="#" onclick="scrollToInternal('#Introduction');return false">Introduction</a></li>
  <li><a href="#" onclick="scrollToInternal('#Chap1');return false">Chapter 1</a></li>
  <li><a href="#" onclick="scrollToInternal('#Chap2');return false">Chapter 2</a></li>
  <li><a href="#" onclick="scrollToInternal('#Chap3');return false">Chapter 3</a></li>
</ul>

沒有mdesdev的解決方案那么優雅，但是它正在工作。