The Problem
I had been using a jQuery plugin to automatically scroll an element to the top of a container with success for quite a while. Then I changed my markup and the .ScrollTo() function began having strangely; specifically, scrolling my entire page to the top of the window then refusing to respond to further .ScrollTo() calls. After an hour of trying to figure out why and then trying an alternative plugin with the same results, I decided to try and see if I could just quick write what I needed.
It turned out to be surprisingly easy — actually only two lines of code — one if you really want to compact it further.
The Layout
The simple markup we are looking at is a container full of elements that we want to scroll to by clicking various buttons. So let’s say we have a container full of header-paragraph pairs representing short descriptions of planets in the solar system (content taken from wikipedia). We have a toolbar of buttons with the planet labels, and by clicking them, we want to scroll to the appropriate header. The markup would look something like this:
<div id="planets">
<div id="mercury" class="button">Mercury</div>
<div id="venus" class="button">Venus</div>
<div id="earth" class="button">Earth</div>
</div>
<div id="content">
<div id="planetWrapper"</div>
<h2 id="content_mercury">Mercury</h2>
<p>
Mercury is the smallest and closest to the Sun of the eight planets in the Solar System, with an orbital period of about 88 Earth days.
</p>
<h2 id="content_venus">Venus</h2>
<p>
Venus is the second planet from the Sun, orbiting it every 224.7 Earth days.
</p>
<h2 id="content_earth">Earth</h2>
<p>
Earth is the third planet from the Sun, and the densest and fifth-largest of the eight planets in the Solar System.
</p>
</div>
</div>
The CSS
There’s only a couple of key elements that need to be in place:
- The content element, being the “outer container” needs its position set to relative and its overflow-y property set to hidden
- The planetWrapper element needs its position property set to absolute
The Scroll
I won’t go into all the details here of reacting to the click events and such in jQuery. What I want to show you is the code that scrolls the planetWrapper to the correct element. Let’s call our function scrollToPlanet and it will accept one parameter, which is the planet’s H2 to scroll to. Therefore:
function scrollToPlanet(planetHeader) {
currentPos = $(planetHeader).position().top;
$(planetWrapper).animate({
top: -(currentPos)
}, 1000);
}
All we are doing here is noting the current position of the planet header we want to scroll to, then animating the entire planetWrapper element such that its top position moves up a negative amount equal to the header’s position. This effectively dispalys the header at the top of the container.