Scroll with anchor without # in URL

Question

I need to scroll through a page using anchor tag.

Right now I'm doing:

<a href="#div1">Link1</a>  <div id='div1'>link1 points me!!</div> 

This works fine when I clicked on Link1, the page scrolls to the div with id "div1".
The point is, I do not want to change my URL which takes #div as suffix once I clicked on Link1.

I tried with anchor href as

void(0); 

and

location.hash='#div1'; return false;  e.preventdefault; 

How to avoid changing the URL?

Answer 1

Take this answer from Jeff Hines using jQuery's animate:

function goToByScroll(id){     $('html,body').animate({scrollTop: $("#"+id).offset().top},'slow'); } 

If you're using jQuery don't forget to add the library to your project.

Edit: Also, make sure that you still "return false;" in the click handler for the link, otherwise it'll still add the "#div1" to your URL (thanks @niaccurshi)

Answer 2

scrollIntoView did the best job when all other methods failed!

document.getElementById('top').scrollIntoView(true); 

Where 'top' is the id of the html tag you want to go.