jQuery scrollTop not working with querystring link

Question

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

Answer 1

1. Use e.preventDefault(); to prevent your code from adding # in your current url

You can also use this code for scrolling to a particular section on any page:

HTML:

<div  id = 'a' style = 'height:300px;'>
123
</div>
<a href= '#b'>Go to 456 </a>

<div id = 'b' style = 'height:300px;' >
456
</div>
<a href= '#c'>Go to 789 </a>

<div id = 'c'style = 'height:300px;' >
789
</div>
<a href= '#d'>Go to asd </a>

<div id = 'd' style = 'height:300px;' >
asd
</div>
<a href= '#e'>Go to fgh </a>

<div  id = 'e'  style = 'height:300px;' >
fgh
</div>
<a href= '#a'>Go to 123 </a>

SCRIPT:

function scroll(id){
    $('html, body').animate({
        scrollTop: $(id).offset().top
    }, 2000);
}
$(document).ready(function() {
    $('a[href*=#]:not([href=#])').click(function (e) {
        var id = $(this).attr('href')
        scroll(id);
        e.preventDefault();
    });
});

DEMO: http://jsfiddle.net/ishandemon/k19p33tm/

http://jsfiddle.net/ishandemon/k19p33tm/1/

Answer 2

I would change the logic you are handling your code. Preventing the default event and accessing the href directly by attr.

Something like this:

$(function() {
    $('a[href*=#]:not([href=#])').on('click', function(e) {
        e.preventDefault();
        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
            var $target = $(this).attr('href');
            if ($target.size()) {
                $('html,body').animate({
                    scrollTop: $target.offset().top
                }, 2000);
            }
        }
    });
});

Btw, I'm not sure about understanding the selector you're using a[href*=#]:not([href=#]). Also, the condition (if location.pathnae.blah...) seems to be pretty awkward. I would simply do something like this:

$(function() {
    $('#some-wrapper').on('click', 'a.scroll-to', function(e) {
        e.preventDefault();
        var $target = $(this).attr('href');
        if ($target.size()) {
            $('html,body').animate({
                scrollTop: $target.offset().top
            }, 2000);
        }
    });
});