javascript - 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= 引起的。默认情况下，a 标签将页面导航到某处，因此使用 href=# 或您所写的，将只导航到页面顶部。

return false 应该可以解决问题，但它可能不在正确的位置。尝试将它放在 closeNav 函数中，作为最后一条语句。否则，您可能需要为标签创建一个事件监听器，然后返回 false 进行响应。您也可以尝试 event.preventDefault() 而不是 return false(但 return false 应该有效 - 它的作用不仅仅是 preventDefault。

更新:

一个有用的方法是避免使用内联 javascript(即，js 在标记本身上的位置:onclick="closeNav();return false;")。相反，创建一个事件监听器并在那里执行你的 js。 Here is a technical discussion关于内联 javascript 与事件监听器(普遍认为内联 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