当点击切换菜单时页面向下滚动
问题描述：
所以我在我的网站上有一个切换菜单，当我点击它打开它时，页面会自动滚动。我不知道该怎么做。你能帮我停止自动滚动吗？非常感谢！！当点击切换菜单时页面向下滚动
如果您没有看到自动滚动，请尝试添加一些文本，以便页面可以滚动，然后您会看到它如何向下滚动。
// 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>
答
我的解决办法，我认为滚动是因为您所做的元素可见/隐藏，它会滚动到它（如@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;
}
+0
它仍然卷轴 – gab
我有一个理论。 ['visibility']（https://developer.mozilla.org/en/docs/Web/CSS/visibility）不显示该元素，但仍会影响其他元素。 _“该框是不可见的（完全透明，没有任何绘制），但仍然影响布局。”_当“visibility”更新时（从“visible”到“hidden”，反之亦然），元素（大于屏幕高度）是'重绘'，所以它推动滚动页面的底部。尝试使用'display：none'和'display：block'，所以它不影响页面布局 –
@MatheusAvellar它仍然滚动：/ – gab
嗯，是的，但现在它只在你打开菜单时滚动！当当！是的，这不是一个解决方案，更多的是提示，因此我只将它作为评论发布。对于那个很抱歉！我会尽量想一个很好的解决方案 –