根據元素類跳轉到頁面上的特定位置

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();