How can I avoid page scrolling up on clicking a simple link (#)

Question

Is there a way to avoid scrolling page up on clicking a simple link such as the one given below:

<a href="#">Click Me</a>

The given code is just a sample. A simple use case. I just wanted to know if there's a way to avoid page scrolling when I use the link as `#`. — , Oct 13 '15 at 20:15
[**Links are not buttons**](http://www.karlgroves.com/2013/05/14/links-are-not-buttons-neither-are-divs-and-spans/**). — Paulie_D, Oct 13 '15 at 20:16

score 1 · Answer 1 · answered Oct 13 '15 at 20:18

1

Try this one:

HTML

<div>Test</div>
<a href="javascript:void(0);">Click me</a>

CSS

div{
   height: 1000px;
}

The div is only for demonstration. jsfiddle

answered Oct 13 '15 at 20:18

Mario Kurzweil

score 1 · Answer 2 · answered Oct 13 '15 at 20:18

You can prevent the default action in a JavaScript event handler with Event.preventDefault() like this:

$('#link').click(function(e){
     e.preventDefault();
});

(Assuming the link has the id link You said you use jQuery, so I used jQuery syntax here)

score 0 · Accepted Answer · answered Oct 13 '15 at 20:12

0

Try the following one:

<a href="#!"> Click Me </a>

answered Oct 13 '15 at 20:12

user1012181

1

Links like this will still change the page URL, resulting in an extra entry in the browser's history and causing the "back" button to simply remove the fragment from the URL instead of doing what the user expects. – Reeno Oct 13 '15 at 21:08

3 Answers3