Seite scrollt nach unten, wenn Sie auf das Toggle-Menü klicken

Question

So habe ich ein Toggle-Menü auf meiner Website und wenn ich darauf klicke, um es zu öffnen, scrollt die Seite von allein. Ich habe keine Ahnung, was ich tun soll. Könnten Sie mir bitte helfen, das automatische Scrollen zu stoppen? Ich danke dir sehr!!

Wenn das automatische Scrollen nicht angezeigt wird, fügen Sie Text hinzu, damit die Seite scrollen kann und Sie sehen, wie sie nach unten scrollt.

// 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

Meine Lösung, Ich gehe davon aus, dass die Schriftrolle auf Grund war, dass man das Element sichtbar/versteckt und es wird navigieren Sie zu ihm (wie @Matheus) sagte gemacht oben in den Kommentaren. Meine Lösung ist das.

anstelle der absoluten Position, machen Sie es fest und geben Sie es oben & unten ein Wert 0 Dies wird es auf den gesamten Bildschirm skalieren.

#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; 
} 

hinzufügen z-index zu hamburger, so dass es oben bleiben wird.

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