javascript - 单击切换菜单时页面向下滚动

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