在單頁面應用程序中命名定位點（SPA）

在SPA中，使用導航框架（如Sammy.js），如何在頁面定位錨點中使用頁內導航？在單頁面應用程序中命名定位點（SPA）

例如說我有一個像localhost/myapp/#/somerecord/1的路線，其中應用程序加載使用id = 1

然而somerecord是非常複雜和漫長somerecord。我希望能夠使用命名錨點跳轉到某個部分。

說，一個article元素就像<article id=section-d> ... </article>定義，我只是鏈接到喜歡<a href=#section-d>Section D</a>它在技術上的工作，但URL讀起來就像localhost/myapp/#section-d，這打破了導航堆棧。點擊「後退」按鈕可以讓我回到localhost/myapp/#/somerecord/1和，而不需要跳回頂部。

首選的操作是跳回頂部或返回上一頁。任何想法如何實現這一目標？

來源

2013-02-25 Doguhan Uluca

這是http://stackoverflow.com/q/10113103/829970的重複內容，但那個只有不好的答案（即沒有sammy.js的簡單Javascript的答案）。 – 2013-03-12 05:22:13

也是http://stackoverflow.com/questions/9351231/scroll-to-anchor-link-in-a-sammy-js-project的副本 – 2013-03-12 05:23:33

我有同樣的問題與sammy.js使用durandal。基本上，您必須爲您的頁面上的每個錨點創建（不可見）路線。查看我的帖子，瞭解我找到的解決方案：http://papamufflon.blogspot.de/2013/04/durandal-scrollspy.html

來源

2013-04-21 09:25:05

實際上，您必須將URL定義爲正則表達式，並在其末尾處允許可選書籤哈希;是這樣的：

get(/#\/somerecord\/(\d+)(#.+)?/, function() { 
    var args = this.params['splat']; 
    var recordId = args[0]; 
    var articleId = args[1]; 
});

這應該與以下任一途徑：

＃/ somerecord/1
＃/ somerecord/1＃（當作如果沒有文章ID）
＃/ somerecord/1＃部-d（條款ArticleID = '＃部-d'）

您應該然後能夠使用條款ArticleID來查找匹配ELE並手動滾動。例如在上面的最後路線，使用jQuery你可以這樣做：

var $article = $(articleId); 
    $(document.body).animate({ scrollTop: $article.offset().top }); 
});

我剛剛寫了這個更全面的文章（使用迪朗達爾），如果你有興趣：http://quickduck.com/blog/2013/04/23/anchor-navigation-durandal/

編輯鏈接已死亡。這篇文章可以在這裏找到http://decompile.it/blog/2013/04/23/anchor-navigation-durandal/

來源

2013-04-23 07:27:21 gerrod

在單頁面應用程序中命名定位點（SPA）

回答

相關問題