當點擊切換菜單時頁面向下滾動

Question

所以我在我的網站上有一個切換菜單，當我點擊它打開它時，頁面會自動滾動。我不知道該怎麼做。你能幫我停止自動滾動嗎？非常感謝！！

如果您沒有看到自動滾動，請嘗試添加一些文本，以便頁面可以滾動，然後您會看到它如何向下滾動。

// TOGGLE MENU 
 

 
var theToggle = document.getElementById('toggle'); 
 
function hasClass(elem, className) { 
 
    return new RegExp(' ' + className + ' ').test(' ' + elem.className + ' '); 
 
} 
 
function addClass(elem, className) { 
 
    if (!hasClass(elem, className)) { 
 
     elem.className += ' ' + className; 
 
    } 
 
} 
 
function removeClass(elem, className) { 
 
    var newClass = ' ' + elem.className.replace(/[\t\r\n]/g, ' ') + ' '; 
 
    if (hasClass(elem, className)) { 
 
     while (newClass.indexOf(' ' + className + ' ') >= 0) { 
 
      if (window.CP.shouldStopExecution(1)) { 
 
       break; 
 
      } 
 
      newClass = newClass.replace(' ' + className + ' ', ' '); 
 
     } 
 
     elem.className = newClass.replace(/^\s+|\s+$/g, ''); 
 
     window.CP.exitedLoop(1); 
 
    } 
 
} 
 
function toggleClass(elem, className) { 
 
    var classes = elem.className.split(' '); 
 
    var i = classes.indexOf(className); 
 
    if(i == -1) 
 
     classes.push(className); 
 
    else 
 
     classes.splice(i,1); 
 
    elem.className = classes.join(' '); 
 
} 
 
theToggle.addEventListener("click", function(){ 
 
    toggleClass(this, 'on'); 
 
    return false; 
 
});

#toggle { 
 
    display: block; 
 
    width: 28px; 
 
    height: 30px; 
 
    position:fixed; 
 
    top:35px; 
 
    left:30px; 
 
} 
 

 
#toggle span:after, #toggle span:before { 
 
    content: ""; 
 
    position: absolute; 
 
    left: 0; 
 
    top: -9px; 
 
} 
 

 
#toggle span:after { 
 
    top: 9px; 
 
} 
 

 
#toggle span { 
 
    position: relative; 
 
    display: block; 
 
} 
 

 
#toggle span, #toggle span:after, #toggle span:before { 
 
    width: 100%; 
 
    height: 4px; 
 
    background-color: #000; 
 
    transition: all 0.3s; 
 
    backface-visibility: hidden; 
 
    border-radius: 0px; 
 
} 
 

 
/* on activation */ 
 
#toggle.on span { 
 
    background-color: transparent; 
 
} 
 

 
#toggle.on span:before { 
 
    transform: rotate(45deg) translate(5px, 5px); 
 
} 
 

 
#toggle.on span:after { 
 
    transform: rotate(-45deg) translate(7px, -8px); 
 
} 
 

 
#toggle.on + #menu { 
 
    opacity: 1; 
 
    visibility: visible; 
 
    transition: opacity .4s; 
 
} 
 

 
/* menu appearance*/ 
 
#menu { 
 
    position: absolute; 
 
    color: #999; 
 
    width: 100%; 
 
    margin: auto; 
 
    text-align: center; 
 
    background: white; 
 
    opacity: 0; 
 
    visibility: hidden; 
 
    transition: opacity .4s; 
 
    margin-top:75px; 
 
    font-weight:700; 
 
    text-decoration:none; 
 
    text-transform:uppercase; 
 
    color: #000; 
 
} 
 

 
#menu:after { 
 
    position: absolute; 
 
    top: -15px; 
 
    left: 95px; 
 
    content: ""; 
 
    display: block; 
 
    border-left: 15px solid transparent; 
 
    border-right: 15px solid transparent; 
 
    transition: opacity .4s; 
 
} 
 

 
#menu ul, #menu li, #menu li a { 
 
    list-style: none; 
 
    display: block; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#menu li a { 
 
    padding: 15px; 
 
    color: #888; 
 
    text-decoration: none; 
 
    font-weight:700; 
 
    text-decoration:none; 
 
    text-transform:uppercase; 
 
    color: #000; 
 
} 
 

 
#menu li a:hover, #menu li a:focus { 
 
    background: #000; 
 
    color: #fff; 
 
}

<div class="mobile"> 
 
      
 
       <a href="#menu" id="toggle"><span></span></a> 
 

 
       <div id="menu"> 
 
        <ul> 
 
        <li><a href="/">News</a></li> 
 
        <li><a href="/zara/">Biografia</a></li> 
 
        <li><a href="/zara/discografia/">Discografia</a></li> 
 
        <li><a href="/sito/">Zara Larsson Italia</a></li> 
 
        <li><a href="/contatti/">Contattaci</a></li> 
 
        </ul> 
 
       </div> 
 
      
 
      </div> 
 
     

Answer 1

我的解決辦法，我認爲滾動是因爲您所做的元素可見/隱藏，它會滾動到它（如@Matheus）以上的評論說。我的解決辦法就是這個

而不是絕對位置，使其固定，並給它頂部&底部0值，這將它縮放到整個屏幕。

#menu { 
    position: fixed; 
    top: 0; 
    bottom: 0; 

    color: #999; 
    width: 100%; 
    margin: auto; 
    text-align: center; 
    background: white; 
    opacity: 0; 
    visibility: hidden; 
    transition: opacity .4s; 
    font-weight:700; 
    text-decoration:none; 
    text-transform:uppercase; 
    color: #000; 
} 

將z-index添加到漢堡包中，以便它保持最佳狀態。

#toggle { 
    display: block; 
    width: 28px; 
    height: 30px; 
    position:fixed; 
    top:35px; 
    left:30px; 
    z-index: 99999; 
}