JQuery scrollTop not working with query key

Question

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

test.php?query=19

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

with three sections:

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

and I use this jquery code to scroll this section at the top of the page (or where the user is on the page) at the top of this 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 problem is that this is not a scroll to a section. its just goes to the bottom of the section and then scrolls up and # appears in my url.

I have another menu on the main page:

home.php and I use the same jquery code and it works on this page.

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

Answer 1

1. Use e.preventDefault(); so that your code does not add # to the current url

You can also use this code to scroll in a specific 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 processing logic of your code. Preventing the default event and accessing href directly with attr.

Something like that:

 $(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); } } }); }); 

By the way, I'm not sure about the understanding of the selector that you use a[href*=#]:not([href=#]) . In addition, the condition ( if location.pathnae.blah... ) seems rather inconvenient. I would just 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); } }); });