How to go to anchor tag in scrollable div without full browser transition?

Question

I am creating a simple glossary widget as part of a larger project for a client. The contents of the glossary are enclosed in a scrollable div (overflow: auto). Each letter has a binding associated with it (#a, #b, #c, etc.). Above the scrollable div is a div containing each letter of the alphabet. Clicking on one of these letters leads the user to these definitions of letters in a scrollable div. This works, but an unintended side effect is that the whole window goes to the anchor, which confuses and annoys the user.

Here is a widget trimmed a bit and with a bunch <br />so you can see what I mean.

http://www.nitrohandsome.com/clients/topics/glossary-widget/

I tried a few different javascript ideas that I combined with some from Google, but nothing worked, so I just got rid of everything except the actual switch to anchor code (I'm a pretty big JS newbie). So, right now, clicking on any of the letters performs this javascript function with the anchor tag passed to it:

    function jumpToAnchor(myAnchor) {
   window.location = String(window.location).replace(/\#.*$/, "") + myAnchor;
  }

How to do this so that the common window does not jump every time you click a link?

Thanks in advance!

Answer 1

If you are using jQuery, you can try the scrollTo plugin. Alternatively, to edit only the hash part or URL, you can simply do

function jumpToAnchor(myAnchor) {
   window.location.hash = myAnchor;
}

Answer 2

IFrame Div ScrollBy.