根据元素类跳转到页面上的特定位置

Question

我有两个HTML元素，并且一开始它们都是隐藏的：

    <div class="alert alert-danger divMessage" id="lblErrorMobile" style="display:none;"></div>
    <div class="alert alert-success divMessage" id="lblSuccessMobile" style="display:none;"></div>

我知道我可以这样导航到另一个：

window.location.href = '#lblErrorMobile';
window.location.href = '#lblSuccessMobile';

是否可以按类在每个类上进行导航-假设是divMessage类？

我的问题是默认情况下不显示这些标签。 如果有错误或成功，它们将分别显示。 而且，如果我尝试在隐藏的标签上导航，则不会发生导航。 这就是为什么按班级导航非常方便-一个或另一个始终可见的原因。

Answer 1

看来您应该为将要跳转到的两个div使用一个容器，而不必知道应该跳转至哪个div 。 例如 ：

<div id="messages">
    <div class="alert alert-danger divMessage" id="lblErrorMobile" style="display:none;"></div>
    <div class="alert alert-success divMessage" id="lblSuccessMobile" style="display:none;"></div>
</div>

然后跳转到#messages 。

Answer 2

您可以使用锚点标记浏览站点，而无需使用Javascript。

https://codepen.io/anon/pen/ejrEzL

<h2 id="top">top</h2>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<h2 id="middle">middle</h2>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<h2 id="end">end</h2>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<div style="position: fixed; right: 10px; top: 10px;">
  <a href="#top">go to top</a>
  <a href="#middle">go to middle</a>
  <a href="#end">go to end</a>
</div>

或使用javascript，可以使用以下方法：

var el = document.getElementById("my-element");
el.scrollIntoView();