animate anchor links with jquery

[Violet_82]

Hi, I have a question about animating anchor links with jquery. I had a look online
and for some hints and then I came up with this code:
HTML

<div class="navWrapper">
    <img src="images/mobile_quick_nav.png" alt="">
    <ul>
        <li><a href="#num1" class="navLink">Home</a></li>
        <li><a href="#num2" class="navLink">Panel 2</a></li>
        <li><a href="#num3" class="navLink">Panel 3</a></li>
        <li><a href="#num4" class="navLink">Panel 4</a></li>
        <li><a href="#num5" class="navLink">Panel 5</a></li>
        <li><a href="#num6" class="navLink">Panel 6</a></li>
    </ul>

</div>
...
<div class="panel" id="num1">
    <div class="intro">
        <h1>Test area</h1>
    </div>
    ...

<div class="panel" id="num2">
    <h2>Panel 2</h2>
    <p>Lorem ipsum dolor sit 
    ...
<div class="panel" id="num3">
    <h2>Panel 3</h2>
    <p>Lorem ipsum dol
    ...

and so on.
The script is:

var navWrapperHeight = $(".navWrapper ul").outerHeight();
$(".navWrapper ul li a").click(function(e){
        e.preventDefault();

        console.log("this.hash is " + this.hash);//returns the #* portion of the link
         $('html,body').animate({
                scrollTop:$(this.hash).offset().top - navWrapperHeight 
            }, 500);
    }); 

Now, the script confuses me slightly. I am grabbing all the links in the navigation and when I click on them I animate the scrolltop property of the html and body. But in this line scrollTop:$(this.hash).offset().top - navWrapperHeight
shouldn't this refer to the item that I am animating (therefore html and body and their offset top) rather than the link
I clicked on?