Remove / Do Not Add Destination URL Link

Question

It might just be for the jQuery / JavaScript guru here, but I just can't find a solution for it on the web.

Case

I have a link at the bottom of the page that says Back to Top , the link is just the target link:

 <a href="#top" class="standard">Back to Top</a> 

So when you click on it, it jumps to the top of the page. Plain.

Problem

When you click on the destination link, the id URL #top added to the URL of the page, that is:

 http://website.com/about-us/#top 

Question

Is there a way to remove or avoid adding this id #top to the URL of the page, but keep the functionality of the page moving up?

Any help with this is much appreciated.

Answer 1

In any case (jQuery or vanilla JavaScript) you want to do the following:

• Select all anchor tags where href set to #top
• Create a jump function that sets the top position of the page and returns false to prevent the default link behavior
• Bind the transition function to the click event of all found nodes

To go, you have several options. I provided them (jQuery and JS specifics) in the first example below.

Using jQuery

jQuery makes selecting and binding to the click event easier. You can then go to the top of the page using jQuery or direct JavaScript.

 $('a[href="#top"]').click(function() { // // To jump, pick one... // // Vanilla JS Jump window.scroll(0,0) // Another Vanilla JS Jump window.scrollTo(0,0) // jQuery Jump $('html,body').scrollTop(0); // Fancy jQuery Animated Scrolling $('html,body').animate({ scrollTop: 0 }, 'slow'); // // ...then prevent the default behavior by returning false. // return false; }); 

jQuery animate provides options for animation duration and easing along with the ability to set a callback.

Vanilla javascript

You can also use Vanilla JS all the way ... Queries and bindings, however, become a bit more painful.

Modern browsers support document.querySelectorAll() , which allows you to capture all link elements in the same way as with jQuery:

 var links = document.querySelectorAll('a[href="#top"]'); 

Then iterate over the elements and attach the "jump":

 for (var i = links.length - 1; i >= 0; i--) { links[i].onclick = function() { window.scroll(); return false; }; }; 

If your target browser does not give you querySelectorAll , you simply look at all the anchor tags to find those related to #top :

 var links = document.body.getElementsByTagName('a'); for (var i = links.length - 1; i >= 0; i--) { var l = links[i]; if(l.getAttribute('href') === '#top') { l.onclick = function() { window.scroll(); return false; } } } 

Answer 2

When handling anchor click events, always use the e.preventDefault(); element e.preventDefault(); On Click of Anchor. When you don’t need a snap element.

  e.preventDefault(); $('html, body').animate({ scrollTop: 0 }, 'slow'); 

Answer 3

 $('a[href=#top]').click(function(){ $(window).scrollTop(0); return false; }); 

You need to stop the default tag to run.

Answer 4

It will work

 $('a.standard').click(function() { $('body,html').animate({ scrollTop: 0 }); }); 

Answer 5

You can find a solution at this link http://gazpo.com/2012/02/scrolltop/ . Try it out.