Scrolling a div with jQuery

JavaScript
1

I have a photo album on my website where I keep holiday and vacation pics in separate albums. One you’ve picked your album and start to view individual pics, you get a column on the right that contains the thumbnails of the album you’re in, so you can scroll up and down and go to a specific pic (example). It’s basically a div with overflow: auto and a set height and width.

Originally, I appended the photo ID to the link, so each one had <a name=“a123” href=“link.to/pic#a123”> (where the 123 is the pic ID) and it would scroll the list to keep the current pic at the top of the div. This had the nice side-effect of bringing the currently viewed fullsize pic up to the middle of the screen.

It worked well until you got to the end of the album. The last three thumbnails would scroll the main window up, cutting off more and more of the currently viewed pic, making you have to scroll back down each time.

So I started looking for a way to scroll the div to the current pic without scrolling the main window, and found a few promising things - scrollTo & LocalScroll to name two - but I was only able to get either of them to work with relative positioning values, and not with anchors. I know there’s GOT to be a way to get that div to scroll on its own, but after an entire night of trying different things, I just can’t get any of them to work.

I have a #main on the next and previous links to get the main photo in the center of the screen so the previous/next links are reachable without scrolling, and I just need to figure out a way to get that list of thumbnails on the right to keep up with the current position in the album.

2

GOT IT! I needed to use id= on my anchors instead of name=


<script type="text/javascript">
$(document).ready(
    function () {
        $('div#albumsidebar').scrollTo('#a236', 1200);
    }
);
</script>

Tada!