Prevent scrolling with empty href - html

Question

We are developing application on our iOS,
Inside our html page, there is "Email Results" button. when I click on the button the screen scrolls up 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 I removed the "button" from the class like:
<a target="_blank" href="" class="button-email"><span class="icon"></span>Email Results</a>
, the button works and I can click it
Where is the issue in my CSS.

Answer 1

I notice the class .button does not have a closing bracket. You may want to fix this.
Toggle with the presences of # in the href value. That is href="#". Do not remove "button" from the class when doing this.
EDITED
Using JavaScript, apply javascript:void(0) as the 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, you can use jQuery
$('a.button-email').click(function (event) {
event.preventDefault();
});