文章/答案/技术大牛

发布

社区首页 >问答首页 >当我打开固定导航菜单时，为什么要转到页面的顶部？

问当我打开固定导航菜单时，为什么要转到页面的顶部？
EN

Stack Overflow用户

提问于 2019-11-09 17:04:00

回答 1查看 57关注 0票数 1

我有一个固定的侧导航菜单，高度为100%。当你点击角落里的汉堡包时，它的宽度会根据你窗口的大小而被设置为15%-100%。当您单击x时，其宽度被设置为0。百分比是相对于身体设定的。这似乎是伟大的工作，直到我添加了内容，以便我可以滚动。当你向下滚动，然后打开/关闭侧导航，它会把你带回到页面的顶部。

我对JavaScript不太熟悉，所以里面可能有问题。我搜索了谷歌和StackOverflow，但什么也没找到。可能我不是在寻找正确的问题。我试着把所有的百分比都换成vh和vw，但没什么改变。我也不认为这是一个浏览器问题(我使用Chrome)，因为我也尝试过在Microsoft，并产生了同样的结果。

<body onresize="WindowResize()">
<!--side-menu-->
  <nav class="navbar">
    <span class="open-Slide">
      <a href="#" onclick="openSlideMenu()">
        <span id="hamburger" class="icon-menu"></span> /*an Icon font I have downloaded*/
      </a>
    </span>
    <div id="side-menu">
      <a href="#" class="btn-close" onclick="closeSlideMenu()">&times;</a>
      <a href="#">Home</a>
      <a href="#">Portfolio</a>
      <a href="#">Blog</a>
    </div>
  </nav>
<!--end of side-menu-->

    //side-menu script
    var sideMenuWidth;
    var sideMenuIsActive = true;
    window.onload = function() {
      if (window.innerWidth > 1143) {
        sideMenuWidth = '15%';
      }else{
        sideMenuWidth = '100%';
      }
    }
    function openSlideMenu () {
      document.getElementById('side-menu').style.width = sideMenuWidth;
        sideMenuIsActive = true;
    }
    function windowResize() {
      if (window.innerWidth > 1143) {
        sideMenuWidth = '15%';
        if (sideMenuIsActive == true) {
          document.getElementById('side-menu').style.width = sideMenuWidth;
        }
      }else{
        sideMenuWidth = '100%';
        if (sideMenuIsActive == true) {
        document.getElementById('side-menu').style.width = sideMenuWidth;
        }
      }
    }
    function closeSlideMenu() {
      document.getElementById('side-menu').style.width = '0';
      sideMenuIsActive = false;
    }
  //end of side-menu script

#side-menu {
  width:15%;
  z-index: 1;
  transition: 0.5s;
  top:0;
  left:0;
  background-color: black;
  height: 100%;
  position: fixed;
}

#hamburger {
  display: absolute;
  top: 0;
  left:0;
  margin: 1rem 0 0 1rem;
  position: fixed;
  color: black;
}

任何帮助都是非常感谢的！

javascript

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-11-09 19:17:22

如果您需要交互式元素，但不需要href属性，则可以使用<button>元素，并为该元素应用所需的CSS。这是更好的选择，从无障碍关注。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/58781576

复制

相似问题

问当我打开固定导航菜单时，为什么要转到页面的顶部？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当我打开固定导航菜单时，为什么要转到页面的顶部？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当我打开固定导航菜单时，为什么要转到页面的顶部？
EN