html - 防止使用空 href 滚动

Question

我们正在我们的 iOS 上开发应用程序，

在我们的 html 页面中，有“通过电子邮件发送结果”按钮。当我点击按钮时，屏幕会立即向上滚动。

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;}

如果我从类中删除“按钮”，例如:

<a target="_blank" href="" class="button-email"><span class="icon"></span>Email Results</a>

，该按钮有效，我可以点击它

我的 CSS 哪里出了问题。

Answer 1

1. 我注意到类(class) .button没有右括号。您可能想要解决这个问题。
2. 切换 href 值中 # 的存在。即 href="#"。执行此操作时不要从类中删除“按钮”。

已编辑

使用 JavaScript，申请 javascript:void(0)作为 href值(value)。

示例

<div class="result-button-wrapper">
<a target="_blank" href="javascript:void(0)" class="button button-email">
<span class="icon"></span>Email Results
</a>
</div>

或者，您可以使用 jQuery

$('a.button-email').click(function (event) { 
     event.preventDefault(); 
});