Keep URL unaffected when anchor link is clicked
I've checked other posts on here, no results of what I'm looking for. I want to click on
<a href="#about">About</a>
<div id="about">Content of this..</div>
and have it scroll to that element without putting www.domain.com/#about in the address bar
As a perfect example please check out this site that I found here and click on some of the links --they don't change the address bar when clicked.
Answer
You can do what you want using javascript and jquery, example below (note that this is using an old version of jquery):
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type='text/javascript'>
jQuery(document).ready(function($) {
$(".scroll").click(function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top}, 1200);
});
});
</script>
</head>
<body>
<a class="scroll" href="#codeword">Blue Words</a>
<div id="codeword"></div>
</body>
</html>