Scroll with anchor without # in URL
Solution 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)
Solution 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.
Solution 3:
Make your life easier, try the following and let me know if there is anything else ;-)
<div>top</div>
<div style="height: 800px;"> </div>
<div><a href="javascript:void(0);" onclick="window.scroll(0,1);">click here</a></div>
FYI: You only need to play around with one/single line href="javascript:void(0);" onclick="window.scroll(0,1);"
and it works for you.
Have a good day!