用javascript確認后如何滾動到頁面上的錨點

Question

我的表單很長，我需要捕獲錯誤並顯示“確認”窗口的JavaScript，以將用戶返回表單的中間，而不是頁面的頂部。 但是，無論我嘗試什么（例如使用$“＃link”）。focu。 頁面始終返回頁面頂部。

我希望它轉到頁面上的錨點。

Answer 1

甚至不使用任何額外的JavaScript，我們可以這樣做：

<a href="#middle" onclick="return confirm('Shall we make a move ?');">Go to middle!</a>

片段

 <div id="top">Top</div> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <div id="middle">Middle</div> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <div id="bottom"> <a href="#middle" onclick="return confirm('Shall we make a move ?');">Go to middle!</a> </div> 

關於在click事件中return的好部分將接受true或false ，如confirm給出的內容。 因此，如果您想點擊該鏈接，則需要一個true ，當您向OK confirm時就會發生。

Answer 2

• 附加click事件在a元素
• 使用confirm-dialogue詢問用戶輸入
• 使用evene.preventDefault()如果用戶說NO

 $('#bottomAElem').on('click', function(e) { var c = confirm('Shall we make a move ?'); if (!c) { e.preventDefault(); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div id="top">Top</div> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <div id="middle">Middle</div> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <div id="bottom"> <a href="#middle" id='bottomAElem'>Go to middle!</a> </div> 

小提琴演示

Answer 3

這有點殺死（實際上是過度殺傷），但是您也可以將其用於其他東西。

https://jsfiddle.net/Lddyn573/3/

的HTML

            <a class="full" href="#section1">#section1</a>
            <a class="full" href="#section2">#section2</a>
            <a class="full" href="#section3">#section3</a>
            <a class="full" href="#section4">#section4</a>
            <a class="full" href="#section5">#section5</a>


<div class="body">

  <div class="divider" id="section1">
    <h2>Section 1</h2></div>
  <div>

  </div>
  <div class="divider" id="section2">
    <h2>Section 2</h2></div>
  <div>

  </div>
  <div class="divider" id="section3">
    <h2>Section 3</h2></div>
  <div>

  </div>
  <div class="divider" id="section4">
    <h2>Section 4</h2></div>
  <div>

  </div>
  <div class="divider" id="section5">
    <h2>Section 5</h2></div>
  <div>
  </div>
</div>
<div>

jQuery查詢

 $(document).ready(function() {
      // Add smooth scrolling to all links
      $("a").on('click', function(event) {

        // Make sure this.hash has a value before overriding default behavior
        if (this.hash !== "") {
          // Prevent default anchor click behavior
          event.preventDefault();

          // Store hash
          var hash = this.hash;

          // Using jQuerys animate() method to add smooth page scroll
          // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
          $('html, body').animate({
            scrollTop: $(hash).offset().top - 20
          }, 800, function() {

            // Add hash (#) to URL when done scrolling (default click behavior)
            window.location.hash = hash;
          });
        } // End if
      });
    });