Question

我正在为手机创建一个菜单，当我点击子菜单中的某个项目时，会出现该菜单。问题是如果我在页面滚动一点时这样做，页面会向上滚动...（无论是打开还是关闭子菜单）。

当页面未滚动时，这显然不会发生

这是代码：

这是子菜单项的CSS

.lisottomenu {
    letter-spacing: 0.02em;
    display: block;   
    background: #E4BF85;
    border-top: 1px solid #fff;
    font-size: 14px;
    list-style-type: none;   
    width:100%;  
}

项目父级的css

ul li.leaf {
    background: #646464 none repeat scroll 0 0;
    border-top: 1px solid #a0a0a0;
    display: block;
     font-size: 15px;
    letter-spacing: 0.02em;
     list-style-type: none;
     position: relative;
 }

这是问题所在：

（问题是自动滚动）

我希望你能帮助我，即使代码有点长，而且我的英文写得不好......

Answer 1

根据我的评论：

任何<a>的href包含＆＃34;＃＆＃34;在URL中放置#，后者又查找空锚。由于一个不存在，它默认滚动到顶部。

删除＆＃34;＃＆＃34;从你的链接，它不再滚动到顶部

更改

<a href="#">Link</a>

到

<a href="">Link</a>

它应该停止滚动到顶部。

Answer 2

问题是子菜单使整个窗口更高，所以它必须在关闭子菜单时进行滚动。

这就是浏览器对这种高度变化的反应。

一种解决方案是给侧面菜单定义max-height，以及overflow-y：scroll。

#content, #sidebar-first {
    display: inline;
    float: left;
    position: relative;
    overflow-y: scroll;
    max-height: 370px;
}

这样，当侧面菜单打开时，它不会影响文件的高度。

小提琴 - http://jsfiddle.net/qsq4y9d8/9/

Answer 3

每次单击菜单时，您创建和删除了很多元素并删除了样式并添加到元素中，我认为浏览器只是尝试刷新布局或其他内容。

尝试添加和删除显示和隐藏子菜单的类，并从头开始将您的元素放在html中，而不是创建和销毁那么多（除非它们需要从服务器或其他东西动态生成）

为什么当我打开子菜单页面向上滚动？

3 个答案: