<a href="#id"> without it going to where said #id is - html

Question

http://jsfiddle.net/U6aKT/
go to id
<div style="margin-top:2000px;"></div>
<a id="id">id</a>
Based on the above example, is it possible for <div id="id"></div> to pop up without the page scrolling to where <div id="id"></div> is?

Answer 1

According to your question and comment under diffrent answer you want to scroll down to #id div or pop up the #id div when the link is clicked. If want to scroll then you have to use jquery animate function with scrollTop function; use the first way. And if you want pop up then use the second way.
First way:
Here is the JsFiddel with scroll animate
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
go to id
<div style="margin-top:2000px;">TEST</div>
<a id="id">id</a>
<script type="text/javascript">$(document) .ready(function() {
$('[href="#id"]').click(function() {
$("html,body") .animate({scrollTop: $("#id").offset().top},1200, "easeOutBounce");
return false;
});
});</script>
Second Way:
Here is JsFiddle
You have to use bootstrap modal. You just need to initialize the the anchor tag data-target attribute value as data-target="#id". And have to load the bootstrap css as well as jquery and bootstrap js. After that make your div class="modal fade" id="id". And also add the modal content, header, footer. Enjoy!
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" >
go to id
<div class="modal fade" id="id" tabindex="-1" role="dialog" aria-labelledby="id" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
Header
</div>
<div class="modal-body">
Body
<div class="modal-footer">
Footer
</div>
</div>
</div>
</div>
</div>
<script src = "https://code.jquery.com/jquery.js"></script>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" > </script>

Answer 2

Your best option is probably using javascript.
Assuming jQuery is already initialized:
$('[href="#id"]').click(function(e){ // bind clicking said link
e.preventDefault(); // alternatively: e.stopPropagation();
});
You could also unbind and bind your click everytime, like so:
$('[href="#id"]').unbind('click').bind('click', function(e){ // bind clicking said link
e.preventDefault(); // alternatively: e.stopPropagation();
// EDIT:
// I **strongly** recommend you use a class such as `fakeLink`
// or something since targeting every `href` is a pain in the...
// so your selector would then be $('.fakeLink')
});
However, by default, it will look for an anchor by the name of #id, like so:
<a name="id"></a>
Hope this helps

Answer 3

Since the href="#id" mechanism is all about scrolling, what I can recommend is to attach a JavaScript method to all <A> elements on page and play a bit with the DOM when onClick.