Can I stop the page from 'scrolling' back to the top when a user clicks on a tab (with Rails not Javascript)?

Question

Ive built a webpage with 'tabs' using rails. When a user clicks a tab, a new page loads. I want to format it so the tabs are always in the same place on the page as a user clicks them. This happens as long as the user has not scrolled down on the page. If a user has scrolled down, clicking on the tab will refresh the page and it is no longer scrolled down - which make clicking the tabs look bad. Is there a way to keep the spot on the page where the user has scrolled down, without using Javascript? If it must be done with Javascript, any suggestions?
T

Answer 1

Without Javascript, nope. If they were at an exact location, you would be good to go, using an anchor (example.html#anchor), but since you don't know the exact location, you're pretty much out of luck.

So sorry!

Answer 2

You can do it but you will need a small amount of Javascript and some CSS hiding.

Suppose these are your tabs:

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

And suppose this is your content:

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

What you would need to do then, and I am demonstrating using the Ext.Core library, is:

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

You also need a little CSS like so:

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

This hides the other content we are not looking at. We set a class on the content container called contentN which is the href of the link for that tab. So if we have a tab with href="#content1" then we add a class to the content container called content1 and now that content is visible and other content is not.

The Ext.Core samples page has another way of doing it, and they have an example up showing it working. Their way is more involved than this.