Question

我正在开发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链接到同一页面中的元素。

但是，现在我正在使用客户端路由，这似乎不起作用。我正在使用它的页面有一个URL：

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

点击上面的其中一个链接会将页面移动到屏幕上的正确位置，但会将网址更改为：

http://myserver.com/#Chap2

是否有标准的方法来处理SPA中的内部链接，同时保留URL？

Answer 1

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

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那样优雅，但它正在发挥作用。

在使用客户端路由时，如何在页面中实现链接？

2 个答案: