onClick 跳转到页面顶部

Question

我正在编写一个带有 JS 侧导航栏的简单网站。当我调整窗口大小以开发不同的宽度时，我注意到页面会跳到顶部。 然后我注意到，当我点击汉堡图标时，页面也会跳到顶部。

我已经调查过了，这似乎是 onClick 的问题。我曾尝试使用 return false，但问题还是一样。

我使用了w3 schools 上提供的代码/教程。 感谢您的帮助

这是我的代码

HTML：

<nav id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav();return false;">&times;</a>

    <img class="sidenavbar-logo-img" src='<?php echo get_template_directory_uri(); ?>/img/logo-NO.png'>

    <?php wp_nav_menu( array( 'theme_location' => 'sidenav-menu' ) ); ?>

<div class='sidebar-nav-info'>
    <p>Lower Trinity St,
    Birmingham,
    B9 4AG</p>
    <p>Facebook   Instagram</p>
    </div>

</nav>

  <!-- Use any element to open the sidenav -->
  <span class="hamburger" onclick="openNav(); return false;">
<i class="fas fa-bars"></i>
</span>

CSS

      /* The navigation menu links */

      .sidenav ul {
        list-style-type: none;
        margin-left: 0;
      }

      .sidenav ul li {
        margin: 0;
      }

      .sidenav a {
          padding: 8px 8px 8px 0px;
          text-decoration: none;
          font-weight: 700;
          font-size: 18px;
          color: #f1f1f1;
          display: block;
          transition: 0.3s;
      }

      /* When you mouse over the navigation links, change their color */
      .sidenav a:hover {
          color: #818181;
          text-decoration: none;
      }

      /* Position and style the close button (top right corner) */
      .sidenav .closebtn {
          position: absolute;
          top: 0;
          right: 25px;
          font-size: 36px;
          margin-left: 50px;
      }

      /* Style page content - use this if you want to push the page content to the right when you open the side navigation */
      #main {
          transition: margin-left .5s;
          padding: 20px;
      }

      /* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
      @media screen and (max-height: 450px) {
          .sidenav {padding-top: 15px;}
          .sidenav a {font-size: 18px;}
      }

      .sidebar-nav-info {
        padding: 30px;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 200px;
        color: #E2E2E2;
        font-size: 12px;
      }


/** HAMBURGER ICON **/
      span.hamburger {
        position: sticky;
        top: 30px;
        left: 30px;
        font-size: 30px;
        font-weight: 800;
        cursor: e-resize;
      }

JS

<script>
/* Set the width of the side navigation to 250px and the left margin of the page content to 250px */
function openNav() {
    document.getElementById("mySidenav").style.width = "300px";
    document.getElementById("main").style.marginLeft = "300px";
}

/* Set the width of the side navigation to 0 and the left margin of the page content to 0 */
function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
    document.getElementById("main").style.marginLeft = "0";
}
</script>

Answer 1

正如您所怀疑的，这是由a 标签中的href= 引起的。默认情况下，标签会在页面中导航到某处，因此使用href=# 或您所写的，只会导航到页面顶部。

return false 应该可以解决问题，但它可能不在正确的位置。试着把它放在closeNav 函数中，作为最后的语句。否则，您可能需要为标签创建一个事件侦听器，并返回 false 进行响应。您也可以尝试event.preventDefault() 而不是return false（但 return false 应该可以工作 - 它比 preventDefault 做得更多。

更新：

有助于避免使用内联 javascript（即 js 位于标签本身的位置：onclick="closeNav();return false;"）。相反，创建一个事件侦听器并在那里执行您的 js。 Here is a technical discussion 关于 inline-javascript 与事件侦听器（普遍的观点是 inline-javascript 更令人担忧且不太理想，特别是在事件冒泡方面，这就是您在此处处理的内容。）Here is a more simple 文章。

所以，切换到一个事件监听器结构，像这样（未经测试）：

var cbel = document.getElementsByClassname("closebtn");
cbel.addEventListener("click", closeNav, false);

var opel = document.getElementsByClassname("hamburger");
opel.addEventListener("click", openNav, false);



/* Set the width of the side navigation to 250px and the left margin of the page content to 250px */
function openNav() {
    document.getElementById("mySidenav").style.width = "300px";
    document.getElementById("main").style.marginLeft = "300px";
    return false;
}

/* Set the width of the side navigation to 0 and the left margin of the page content to 0 */
function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
    document.getElementById("main").style.marginLeft = "0";
    return false;
}

最后一点：我还建议您研究 jQuery，因为：

1) 你正在使用bootstrap，它本身使用jQuery，所以它已经加载了

2) 打字少了很多

3) 大多数人（包括我自己）发现它要简单得多。例如，上面的 jQuery 代码如下所示：

$(function(){

    $('.closebtn').click(function(){
        $("#mySidenav").css('width', '300px');
        $("#main").css('margin-left', '300px');
    });

});//END document.ready