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

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