html - Prevent scrolling with empty href -
we developing application on our ios,
inside our html page, there "email results" button. when click on button screen scrolls immediately.
html:
<div class="result-button-wrapper"> <a target="_blank" href="" class="button button-email"><span class="icon"></span>email results</a> </div>
css:
.button { display:inline-block; padding:12px; position:relative; margin:12px; cursor:pointer; color:#fff !important; font-size:16px; font-weight:bold; text-decoration:none; text-shadow:0px 1px 2px #222222; text-align:center;} .button.button-email { display:block; width:130px; padding-left:28px; margin:10px auto 10px auto;}
if removed "button" class like:
<a target="_blank" href="" class="button-email"><span class="icon"></span>email results</a>
, button works , can click it
where issue in css.
- i notice class
.button
not have closing bracket. may want fix this. - toggle presences of # in href value. href="#". not remove "button" class when doing this.
edited
using javascript, apply javascript:void(0)
href
value.
example
<div class="result-button-wrapper"> <a target="_blank" href="javascript:void(0)" class="button button-email"> <span class="icon"></span>email results </a> </div>
alternatively, can use jquery
$('a.button-email').click(function (event) { event.preventdefault(); });
Comments
Post a Comment