Alternative href = "#" for saving mouse properties
I have a long HTML page, on a modal page open the page scroll to the top, which can be solved by removing the href = "#" from
<a href="#" id="myId">Click me to open modal</a>
But by removing that, it changes the display of the "hand" mouse pointer on the anchor tag to "text blinker".
How to get rid of href="#"
without losing this property?
source to share
Option 1:
Instead:
<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 tag <a>
as an appropriate anchor with the default CSS styles, but it will not enforce the default link behavior, which forces the browser to scroll to the top.
Option 2:
Use event.preventDefault()
in your javascript to prevent browser scrolling up.
Option 3:
Remove the property href
altogether and add cursor: pointer
to your CSS.
source to share
You can prevent default binding behavior by 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>
source to share