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.

1. i notice class .button not have closing bracket. may want fix this.
2. 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();  });