JS切換菜單作爲返回頂部按鈕？

我有一個切換菜單按鈕，使用JS來打開/關閉。直到最近，我還注意到它作爲一個返回頂層功能，如果我在菜單上切換而遠離頁面頂部，它會立即將我帶到頁面的頂部。不確定它爲什麼是因爲我是一個總的JS noob。非常感謝，如果有人可以幫助這一點。JS切換菜單作爲返回頂部按鈕？

<!--HTML MARKUP--> 
    <header class="menu"> 
     <a href="#" onclick="toggle_visibility('drop-menu-content');"> 
      <div id="drop-menu"> 
       <i class="fa fa-bars"></i> 
      </div> 
     </a> 
      <ul id="drop-menu-content"> 
      </ul> 
    </header> 

    <!--Javascript Below--> 
    <script> 
    function toggle_visibility(id) { 
     var e = document.getElementById(id); 
     if(e.style.display == 'block') 
     e.style.display = 'none'; 
     else 
     e.style.display = 'block'; 
    } 
    </script>

謝謝！

來源

2014-12-31 Dan

您的''標記（或現在'

嘿@danielnixon感謝您的評論好友，是的，我只是複製和粘貼準系統標記沒有內容，但我有我的項目上的內容，所有的工作都很好:) – Dan

這裏沒有鏈接，因此用<button>代替<a>，並且擺脫了href="#"。

來源

2014-12-31 01:12:08 danielnixon

嗨丹尼爾，感謝您的快速答覆，這種快速和簡單的修復也。非常感激！！ :) – Dan

a標記中的哈希URL的默認行爲是將瀏覽器窗口滾動到頁面上由哈希指定的id的元素。例如，如果您有一個id爲「my-element」的元素，請單擊一個a元素，href="#my-element"將瀏覽器窗口滾動到該元素。如果網址只是散列，瀏覽器會將其解釋爲網頁的頂部。

爲了防止這一點，你可以乘坐@ danielnixon的意見，並與一個按鈕替換a， ~~可以去除 href全部屬性，然後重新風格的元素有 pointer: cursor因爲非鏈接 a標籤有默認光標，~~ 或者您也可以更新您的Click事件處理程序使用一個函數，它看起來像下面這樣：

function toggleMenu(ev) { 
    ev.preventDefault(); 
    toggle_visibility('drop-menu-content'); 
}

調用preventDefault()阻止瀏覽器上的事件，在這種情況下是滾動執行它的默認行爲窗口到文檔的頂部。

編輯：如果您要使用a元素，請不要刪除href屬性。謝謝，@danielnixon

來源

2014-12-31 01:21:50 lukewestby

不要刪除'href' attr，它會破壞鍵盤的可訪問性。 – danielnixon

當我想到它時，仍然是一個可怕的黑客。：D使用JavaScript從根本上將「」的默認行爲從「返回頂部」替換爲「切換可見性」。當然，這是通常的方法。但是，由於'href'的值在JavaScript正常工作時沒有任何影響，所以你可以使它更具表現力。例如''。編輯：對不起，也許這個評論應該在問題之下，而不是你的答案。 – Robert

是的。我認爲使用'button'是最好的方法，我不完全確定爲什麼'a'元素如此無處不在用於點擊交互。在我的回答中，我只想強調瀏覽器爲什麼這麼做，以及如何解決這個問題。 – lukewestby

JS切換菜單作爲返回頂部按鈕？

回答

相關問題