Scroll with anchor without # in URL

Make your life easier, try the following and let me know if there is anything else ;-)

<div>top</div>
<div style="height: 800px;">&nbsp;</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!

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)

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.

Only Add this code into jquery on document ready

Ref : http://css-tricks.com/snippets/jquery/smooth-scrolling/

$(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
        }, 1000);
        return false;
      }
    }
  });
});