單擊菜單圖標使頁面跳回頂部

Question

第一次發帖在這里。 對不起，如果我犯了愚蠢的錯誤。 但我遇到的問題是，每當我單擊漢堡圖標時，頁面都會跳回頂部。 當菜單從右側滑動時，我真的希望頁面停留在用戶所在的位置。 我不知道我是否以最有效的方式處理這份漢堡菜單。

任何建議都會很棒

提前致謝

 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>

Answer 1

您必須阻止默認事件的發生。 有兩種方法可以做到這一點。 一種簡單的方法是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';
}

單擊菜單圖標使頁面跳回頂部

問題描述

1 個解決方案

解決方案1
1 已采納 2020-06-11 09:20:06

單擊菜單圖標使頁面跳回頂部

問題描述

1 個解決方案

解決方案1 1 已采納 2020-06-11 09:20:06

解決方案1
1 已采納 2020-06-11 09:20:06