3

I have a long HTML page, on modal open the page scrolls to top which can be solved by removing href="#" from 

<a href="#" id="myId">Click me to open modal</a>

But removing that, it changes mouseover display of "hand" on anchor tag to "text blinker".

How do I get rid of href="#" without loosing that property?

Giacomo Paita
  • 1,411
  • 2
  • 12
  • 21
Saurav Sood
  • 101
  • 2
  • 12

4 Answers4

8

Set

cursor:pointer;

on the <a> element

Akshay
  • 14,138
  • 5
  • 46
  • 70
1

Option 1:

Instead of:

<a href="#" id="myId">Click me to open modal</a>

Try:

<a href="javascript:void(0);" id="myId">Click me to open modal</a>

This will treat the <a> tag as a proper anchor, with default CSS styles, but will not execute the default link behavior that causes the browser to scroll to the top.

Option 2:

Use event.preventDefault() in your javascript to prevent the browser from scrolling to the top.

Option 3:

Remove the href property altogether, and add cursor: pointer to your CSS.

Dale Harris
  • 550
  • 4
  • 14
  • @GiacomoPaita I generally agree, but in cases like this with a modal window there isn't always a semantically appropriate target nor a reason to store a URL route in the browser's history. – Dale Harris Apr 18 '15 at 10:50
  • thank you for the detailed description, cleared a lot of things for me along with providing other options that I can use – Saurav Sood Apr 20 '15 at 08:09
  • No problem. There's lots more on the topic. If you're interested, here's [another StackOverflow question](http://stackoverflow.com/questions/134845/href-attribute-for-javascript-links-or-javascriptvoid0?rq=1) that dives much deeper into the issue. – Dale Harris Apr 20 '15 at 15:39
0

You can prevent the anchor default behavior, setting event.preventDefault() in your JS.

I don't know how your code is, but here is a jQuery example: 

<a href="http://jquery.com">default click action is prevented</a>
<div id="log"></div>


<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
 $( "a" ).click(function( event ) {
   event.preventDefault();
   $( "<div>" )
     .append( "default " + event.type + " prevented" )
     .appendTo( "#log" );
});
</script>
Giacomo Paita
  • 1,411
  • 2
  • 12
  • 21
0

If you want to open a blank link use the URL: "about:blank"

Nicolò Favaretto
  • 49
  • 7