Question

我正在尝试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>

请你帮我解释为什么以上不起作用或我做错了什么。

Answer 1

您使用jQuery，但忘记在文档准备中添加代码：

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

如果您不喜欢jQuery，请将其用作事件处理程序：

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

Answer 2

您正在尝试在代码中滚动主体/ 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;
}

单击滚动不在固定div上

2 个答案: