javascript - 单击菜单图标使页面跳回顶部
问题描述
第一次在这里发帖。对不起,如果我犯了愚蠢的错误。但是我遇到的问题是每当我单击汉堡图标时页面就会跳回顶部。当菜单从右侧滑动时,我真的希望页面保持在用户所在的位置。我不知道我是否以最有效的方式处理这个汉堡菜单。
任何建议都会很棒
提前致谢
function openSlideMenu(){
document.getElementById('menu').style.width = '250px';
document.getElementById('content').style.marginRight = '250px';
}
function closeSlideMenu(){
document.getElementById('menu').style.width = '0';
document.getElementById('content').style.marginRight = '0';
}
header {
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
top: 0;
width: 100%;
z-index: 100;
background-color: #000;
color: #fff;
padding: 1rem;
}
.nav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: #000;
overflow-x: hidden;
padding-top: 60px;
transition: 0.7s;
}
.nav a {
display: block;
padding: 20px 30px;
font-size: 20px;
text-decoration: none;
color: #ccc;
}
.nav a:hover {
color: #fff;
transition: 0.4s;
}
.nav .close {
position: absolute;
top: 0;
right: 0;
}
.slide a {
color: #fff;
position: absolute;
top: 10px;
right: 10px;
}
.slide a .menu {
padding-left: 0.4rem;
}
.overlay {
background-color: #000;
z-index: 5;
}
<body>
<div class="overlay">
<header id="content">
<div class="logo">Industrious</div>
<nav>
<span class="slide">
<a href="#" onclick="openSlideMenu()">
<i class="fas fa-bars"></i><span class="menu">Menu</span>
</a>
</span>
<div id="menu" class="nav">
<a href="#" class="close" onclick="closeSlideMenu()">
<i class="fas fa-times"></i>
</a>
<a href="#">Home</a>
<a href="#">Elements</a>
<a href="#">Generic</a>
</div>
</nav>
</header>
</div>
解决方案
您必须阻止默认事件的发生。有两种方法可以做到这一点。一种简单的方法是href
to javascript:;
。
function openSlideMenu() {
document.getElementById('menu').style.width = '250px';
document.getElementById('content').style.marginRight = '250px';
}
function closeSlideMenu() {
document.getElementById('menu').style.width = '0';
document.getElementById('content').style.marginRight = '0';
}
header {
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
top: 0;
width: 100%;
z-index: 100;
background-color: #000;
color: #fff;
padding: 1rem;
}
.nav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: #000;
overflow-x: hidden;
padding-top: 60px;
transition: 0.7s;
}
.nav a {
display: block;
padding: 20px 30px;
font-size: 20px;
text-decoration: none;
color: #ccc;
}
.nav a:hover {
color: #fff;
transition: 0.4s;
}
.nav .close {
position: absolute;
top: 0;
right: 0;
}
.slide a {
color: #fff;
position: absolute;
top: 10px;
right: 10px;
}
.slide a .menu {
padding-left: 0.4rem;
}
.overlay {
background-color: #000;
z-index: 5;
}
<div class="overlay">
<header id="content">
<div class="logo">Industrious</div>
<nav>
<span class="slide">
<a href="javascript:;" onclick="openSlideMenu()">
<i class="fas fa-bars"></i>
<span class="menu">Menu</span>
</a>
</span>
<div id="menu" class="nav">
<a href="javascript:;" class="close" onclick="closeSlideMenu()">
<i class="fas fa-times"></i>
</a>
<a href="#">Home</a>
<a href="#">Elements</a>
<a href="#">Generic</a>
</div>
</nav>
</header>
</div>
第二个也是正确的方法是做event.preventDefault()
。如果您使用的是不显眼的事件侦听器,则可以执行以下操作:
elem.onClick = function (e) {
e.preventDefault();
document.getElementById('menu').style.width = '250px';
document.getElementById('content').style.marginRight = '250px';
}
推荐阅读
- python-3.x - 如何在同一个 Python 脚本中读取和写入串行缓冲区?
- python - 分段错误:在 OSX 上带有 pyqt5 的 QMainWindow 退出按钮上的 11
- android - 如何在 Android 上创建此自定义底部导航
- ldap - 如何将 AD LDS distinctName 属性更新为 Single Value 为 No
- php - 如何通过一些简单的程序将 Sql Query 转换为 Laravel
- kiwi-tcms - 在 kiwi tcms 中的测试运行中如何将测试分配给不同用户的过程
- android - 获取 SSL 握手异常,尝试在 android 应用程序中执行 SSL
- priority-web-sdk - 无法按 CUST 从 CUSTOMERS 表中获取
- oracle-cloud-infrastructure - 无法使用 PUTTY 连接到 Oracle 云计算 VM 实例
- java - HBase 连接在随机时间延迟后被拒绝