单击滚动在固定 div 上不起作用

我正在尝试scrollTop我的左侧div，但由于某种原因，它不起作用。

以下是我的CSS，HTML和jquery代码。我尝试了很多事情，但都失败了。现在，如果您请帮助我解决这个问题，那就太好了。

$('#leftside').click(function(e) {
  $("html, body").animate({
    scrollTop: 0
  }, 600);
  e.preventDefault();
});

html,
body {
  height: 100% !important;
}
body {
  background-color: #ffffff;
  font-weight: 400;
  font-size: .79em;
  line-height: 1.6em;
  font-family: 'Open Sans', Frutiger, Calibri, 'Myriad Pro', sans-serif;
  color: #000;
  height: auto;
}
#content-wrapper {
  position: absolute;
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  padding-top: 39px;
  box-sizing: border-box;
}
#leftside {
  width: 240px;
  height: 100%;
  float: left;
  box-sizing: border-box;
  padding-top: 5px;
  background-color: #364150;
  position: relative;
}
#rightside {
  position: fixed;
  height: 100%;
  width: 100%;
  padding-bottom: 50px;
  top: 39px;
  right: 0;
  left: 239px;
  background-color: #fff;
}
.right-content {
  overflow: auto;
  height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
  ..... head code
</head>
<body>
  <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    nav..... code
  </nav>
  <div id="content-wrapper">
    <div id="leftside">
      <ul class="page-sidebar-menu">
        <li>....</li>
        <li>....</li>
      </ul>
    </div>
    <div id="rightside">
      <div class="right-content">
        Right side content
      </div>
    </div>
  </div>

你能帮我为什么上面不起作用或我做错了什么。

你使用 jQuery，但忘记在 Document ready 中添加你的代码：

<script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
        ... //your codes come here
    });
</script>

如果你不喜欢jQuery，请使用它作为事件处理程序：

document.getElementById("yourid").addEventListener("click", function( event ) ...

您正在尝试滚动代码中的主体/html，将"html，body"更改为"#leftside"。

$('#leftside').click(function(e){
  $("#leftside").animate({ scrollTop: 0 }, 600);
});

您还应该将左侧div 的溢出设置为"滚动"：

#leftside {
      width: 240px;
      height: 100%;
      float: left;
      box-sizing: border-box;
      padding-top: 5px;
      background-color: #364150;
      position: relative;
      overflow: scroll;
}

相关内容

最新更新

热门标签：