2

我正在开发一个 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

单击上面的链接之一确实会将页面移动到屏幕上的正确位置，但会将 URL 更改为：

http://myserver.com/#Chap2

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

4

2 回答 2

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); 
  });
});
于 2013-12-03T19:25:28.023 回答
0

@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-03T20:08:13.140 回答