I have a navigation and the initial url looks like this:

`test.php?query=19`

and I have links on my page like so `<a href="#section-1">Section 1</a><a href="#section-2">Section 2</a><a href="#section-3">Section 3</a>`

with 3 sections:

```
<section id="section-1"></section><section id="section-2"></section><section id="section-3"></section>

```

and I am using this jquery code to scroll to that section from the top of the page (or where the user is on the page) to the top of that section and not show the `#` tag in my url.

```
$(function() {
    $('a[href*=#]:not([href=#])').click(function() {
        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
            if (target.length) {
                $('html,body').animate({
                    scrollTop: target.offset().top
                }, 2000);
                return false;
            }
        }
    });
});

```

my issue is that this does not scroll to the section. its just goes to the section bottom of the section and then scrolls to the top and the `#` appears in my url.

I have another menu on my main home page:

`home.php` and I am using the exact same jquery code and it works on that page.

My question is how do I get the ScrollTop to work in my `test.php?query=19` page like it does on `home.php` When I click on a like on `test.php?query=19` my url changes to this: `test.php?query=19#section-1`