jQuery scrollTop滚动问题

Question

I am having 2 issues with scrolling, i figured it would just be easier to ask them both in one post.

Before I ask, below is my jQuery code im having issues with.

$("a").click(function() {
    if(this.hash){
        $("#main").animate({
            scrollTop : $("h3[name="+this.hash.substr(1)+"]").position().top - 120
        },2000,"easeOutExpo");
    }
});

Situation: What I have going on in my page is basically i have a side menu with a couple lists. Each item in each list links to a anchor in my main div section, or my 'content' section. When a list item is clicked, the code above runs and it scrolls to one of the anchors.

Issue 1: When i click on a item in one of the lists, it scrolls down to a anchor which works just fine. But when that same item is clicked again, the main area scrolls back up to the top of the div. My thought to fix this was to check the current 'scrolled to' location of the div, and then not allow the code to run again if the location hadn't changed since the first click but i couldn't get that to work. Any suggestions on how to fix this issue?

Issue 2: Again as stated above, when i click on a item in a list it scrolls down to a anchor. What i then want to be able to to is click on a different list item and have it scroll to that position. The problem is when i click on a different list item, it scrolls to some random position in the main div, positions i haven't even anchored yet. Can anyone explain how I can make it so i can scroll from anchor to anchor?

Note: Please respond by having issue 1 or issue 2 above your explanation so i know which one your referring to. Thanks

EDIT: Thanks to Roko's help i got it working. For future viewers here is the fiddle of a working demo: http://jsfiddle.net/TsUcc/3/ and below is what the finally jquery code looks like

$("a").click(function( e ) {
    e.preventDefault();

    if(this.hash){

        var target = '#'+ this.hash.substr(1);
        var destination = $(target).offset().top - 10;

        $('#main').stop().animate({
            scrollTop : '+=' + destination
        }, 1000);
    }
});

Answer 1

LIVE DEMO

ISSUE 1:

you probably use something like: <a href="#goto">goto</a> and you did not prevented the browser default behavior which is simply done by passing the event to the click handler like:

$("a").click(function( e ) {
     e.preventDefault();
     // .....
});

ISSUE 2

The HTMLelement position you're using is just a passive position of an element relative to it's positioned parent element. which means that an element can have a position of ie: 30 even if it's at the bottom of your page.
To fix that use

offset().top

_{Also worth reading: https://developer.mozilla.org/en-US/docs/Web/API/element.getBoundingClientRect}

ISSUE 3

H3 elements are not supposed to have a name attribute.
Use an ID for that purpose.
Why?
if you have a nice web and you have some sexy stuff at the bottom of your page, I can send a link to my friend by referencing your web page and the ID in a link like:

example.com#bottomLady

and he'll get immediately my thoughts without the need to scroll your page all the way down.