我可以停止页面“滚动”吗？当用户单击选项卡时返回顶部（使用 Rails 而不是 Javascript）？

Question

我已经使用 Rails 构建了一个带有“选项卡”的网页。当用户单击选项卡时，会加载一个新页面。我想对其进行格式化，以便当用户单击选项卡时选项卡始终位于页面上的同一位置。只要用户没有向下滚动页面，就会发生这种情况。如果用户向下滚动，单击选项卡将刷新页面并且不再向下滚动 - 这使得单击选项卡看起来很糟糕。有没有一种方法可以在不使用 JavaScript 的情况下保留用户向下滚动的页面上的位置？如果必须用Javascript完成，有什么建议吗？
时间 替代文本 http://img.skitch.com/20100526-xtrn2ncbetj6bs1a2s4xwywfjh.png

Answer 1

没有 JavaScript，不行。如果它们位于确切的位置，那么您就可以使用锚点 (example.html#anchor) 开始，但由于您不知道确切的位置，所以您几乎已经出局了运气。

非常抱歉！

Answer 2

你可以做到，但你需要少量的 Javascript 和一些 CSS 隐藏。

假设这些是您的选项卡：

<ul id="nav">
  <li class="tab"><a href="#content1">Content 1</a></li>
  <li class="tab"><a href="#content2">Content 2</a></li>
</ul>

假设这是您的内容：

<div id="content" class="content1">
  <div id="content1">
    <h1>Some content</h1>
    <p>This is my content.</p>
  </div>

  <div id="content2">
    <h1>More content</h1>
    <p>This is my other content.</p>
  </div>
</div>

那么您需要做什么，我正在使用 Ext.Core 库，是：

<script type="text/javascript">
Ext.onReady(function() {
  Ext.select('.tab a').on('click', function(ev, el) {
    ev.stopEvent();
    var content_id = el.href.replace('#', '');
    Ext.get('content').removeClass(['content1', 'content2', ...]).addClass(content_id);
  });
});
</script>

你还需要一点 CSS，如下所示：

#content.content2 #content1,
#content.content1 #content2 {
  display:none;
} 

这隐藏了我们不看的其他内容。我们在内容容器上设置一个名为 contentN 的类，它是该选项卡链接的 href。因此，如果我们有一个带有 href="#content1" 的选项卡，那么我们将一个名为 content1 的类添加到内容容器中，现在内容是可见的，而其他内容则不可见。

Ext.Core 示例页面有另一种方法，它们有一个 示例显示其工作原理。他们的方式比这更复杂。