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

我正在開發SPA，使用crossroads.js進行客戶端路由。一切都很完美，只有一個例外。如何在使用客戶端路由的同時在頁面內實現鏈接？

我在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

點擊其中一個鏈接，上面並在頁面移動到屏幕上的正確位置，但它改變了網址：

http://myserver.com/#Chap2

，這我用這對具有類似URL的網頁

在保存URL的同時，是否有一種處理SPA內部鏈接的標準方式？

來源

2013-12-03 KevinD

你使用jQuery嗎？ – mdesdev

是的。這是個好主意。我會玩增加一個點擊處理程序，並使用jQuery導航到正確的位置。謝謝！ – KevinD

我會讓你成爲小提琴;） – mdesdev

這裏有一個FIDDLE

<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); 
    }); 
});

來源

2013-12-03 19:25:28 mdesdev

謝謝！爲了讓它與我的項目合作，我不得不改變一下，但既然你讓我指出了正確的方向，我接受了你的答案。我會添加另一個答案，顯示我如何修改它。 – KevinD

不客氣;）P.S.我不知道你的代碼，這只是一個例子。 – mdesdev

@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的，但它的工作。

來源

2013-12-03 20:08:13 KevinD

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

回答

相關問題