Violet_82 89 Posting Whiz in Training

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:

<div class="navWrapper">
    <img src="images/mobile_quick_nav.png" alt="">
        <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>

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

<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){

        console.log("this.hash is " + this.hash);//returns the #* portion of the link
                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?