爲什麼頁面在切換菜單後滾動到頂部

我的菜單有一個固定的類，點擊按鈕後容器顯示爲無，菜單顯示，但當再次點擊切換效果時，頁面滾動到頂部，我希望它能夠在點擊按鈕的同一個地方播放。由於menumobileactive類覆蓋了所有頁面，我使用絕對類來改變其滾動的屬性，但再次顯示容器時，它會顯示在頁面的頂部。如何可以在容器apear在其中按鈕已cliked爲什麼頁面在切換菜單後滾動到頂部

$("button").on("click",function(){ 
    $(this).toggleClass("menu-on"); 
    $(".menumobileactive").toggleClass("visible"); 
    $(".menu").toggleClass("absolute"); 
    $(".container").toggleClass("invisible"); 
}); 

<div class="menu"> 
    <div class="menumobile"> 
     <button> 
      <span class="line line-t"></span> 
      <span class="line line-m"></span> 
      <span class="line line-b"></span> 
     </button> 
    </div> 
    <div class="menudesktop"> 
     <ul> 
      <li><a href="">Link 1</a></li> 
      <li><a href="">Link 2</a></li> 
      <li><a href="">Link 3</a></li> 
      <li><a href="">Link 4</a></li> 
      <li><a href="">Link 5</a></li> 
     </ul> 
    </div> 
</div>

這裏一樣的地方是uploded頁casarossa.com.mx，嘗試切換的移動版本，爲什麼被點擊的按鈕時，在頁面結束時，它會在開始時重置容器？

來源

2016-11-23 Diego Cervantes

你介意提供一些更多的代碼，一個你正在描述的實例。 – odedta

是的，當我點擊我的按鈕，容器顯示沒有，但當再次點擊它顯示，但它顯示頂部的div。例如，如果用戶點擊容器中間的按鈕，我希望它在ht emiddle時再次出現，而不是位於頂部 –

您是否可以將代碼轉換爲包含HTML的堆棧片段？ – Barmar

試試這個：

$("button").on("click",function(e){ 

    //prevents from scrolling to top behavior 
    e.preventDefault(); 

    $(this).toggleClass("menu-on"); 
    $(".menumobileactive").toggleClass("visible"); 
    $(".menu").toggleClass("absolute"); 
    $(".container").toggleClass("invisible"); 
});

來源

2016-11-23 22:46:28 Steffen

這沒有工作，謝謝你的支持，我希望容器div，再次在用戶離開它的位置，例如作爲我的頁面有圖像，我想，如果用戶切換按鈕的容器有位置或用戶點擊該按鈕的圖像，而不是頂部 –

如果您只是通過點擊鼠標導致顯示的類：無;我不明白爲什麼這個職位應該改變。 – Steffen

試一下，只會導致外觀和消失。 $（「。menu」）。toggleClass（「absolute」）; 的名字我可以想象這條線是壞男孩 – Steffen

這是因爲這一行的： $(".contenido").toggleClass("hide");

基本上，你並不真的需要隱藏的內容，因爲你在移動視圖中，只將新的移動菜單（打開時）全屏顯示，並在再次單擊按鈕時將其隱藏。由於您隱藏並將主要內容帶回，它會自動滾動到頂部。爲什麼？我無法真正解釋，因爲我不知道jQuery是如何工作的，但是刪除該行可以解決您的問題。

來源

2016-11-25 18:45:03 odedta

爲什麼頁面在切換菜單後滾動到頂部

回答

相關問題