javascript - 通过按钮滚动的 Div，没有滚动条

Question

我知道这个主题已经被讨论过很多次，但我所查看和尝试的一切都不太奏效。希望提供我的实际代码会导致解决方案。我已经向上滚动了，但是向下按钮什么也没做。尝试使用按钮仅在此“homeBlogs”div 内滚动。这是我正在使用的代码:

$(document).ready(function() {
  $("#upClick").click(function() {
    $('#homeBlogs').scrollTop($('#homeBlogs').scrollTop() + 400);
  });

  $("#downClick").click(function() {
    $('#homeBlogs').scrollTop($('#homeBlogs').scrollTop() - 800);
  });

});

#homeBlogs {
  background-color: #878787;
  height: 400px;
  overflow: hidden;
}
#scrollUp {
  background-color: black;
  text-align: center;
  color: white;
  margin-left: auto;
  cursor: pointer;
}
#scrollDown {
  background-color: black;
  text-align: center;
  color: white;
  margin-left: auto;
  margin-top: -15px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-4 hidden-xs hidden-sm">
  <div class="row" id="scrollUp">
    <button id="downClick"><i class="fa fa-chevron-circle-up fa-2x"></i>
    </button>
  </div>
  <div id="homeBlogs">
    <div class="row">
      <h3 class="blogTitle">Blog Title</h3>
    </div>
    <div class="row" id="blogFeed1">
      <div class="col-md-12 hidden-sm hidden-xs">
        <img class="img-responsive" src="https://placehold.it/100x100" id="thumbNail1" />
        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
      </div>
    </div>
    <div class="row">
      <h3 class="blogTitle">Blog Title</h3>
    </div>
    <div class="row" id="blogFeed2">
      <div class="col-md-12 hidden-sm hidden-xs">
        <img class="img-responsive" src="https://placehold.it/100x100" id="thumbNail2" />
        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
      </div>
    </div>
    <div class="row">
      <h3 class="blogTitle">Blog Title</h3>
    </div>
    <div class="row" id="blogFeed3">
      <div class="col-md-12 hidden-sm hidden-xs">
        <img class="img-responsive" src="https://placehold.it/100x100" id="thumbNail3" />
        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
      </div>
    </div>
  </div>
  <div class="row" id="scrollDown">
    <button id="downClick"><i class="fa fa-chevron-circle-down fa-2x"></i>
    </button>
  </div>
</div>

Answer 1

您有两个 ID 为 downClick 的按钮，没有 ID 为 upClick 的按钮。

$(document).ready(function() {
  $("#upClick").click(function() {
    console.log('Before:'+$('#homeBlogs').scrollTop());
    $('#homeBlogs').scrollTop($('#homeBlogs').scrollTop() + 400);
    console.log('After:'+$('#homeBlogs').scrollTop());
  });

  $("#downClick").click(function() {
    console.log('Before:'+$('#homeBlogs').scrollTop());
    $('#homeBlogs').scrollTop($('#homeBlogs').scrollTop() - 800);
    console.log('After:'+$('#homeBlogs').scrollTop());
  });

});

#homeBlogs {
  background-color: #878787;
  height: 400px;
  overflow: hidden;
}
#scrollUp {
  background-color: black;
  text-align: center;
  color: white;
  margin-left: auto;
  cursor: pointer;
}
#scrollDown {
  background-color: black;
  text-align: center;
  color: white;
  margin-left: auto;
  margin-top: -15px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-4 hidden-xs hidden-sm">
  <div class="row" id="scrollUp">
    <button id="downClick"><i class="fa fa-chevron-circle-up fa-2x"></i>
    </button>
  </div>
  <div id="homeBlogs">
    <div class="row">
      <h3 class="blogTitle">Blog Title</h3>
    </div>
    <div class="row" id="blogFeed1">
      <div class="col-md-12 hidden-sm hidden-xs">
        <img class="img-responsive" src="https://placehold.it/100x100" id="thumbNail1" />
        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
      </div>
    </div>
    <div class="row">
      <h3 class="blogTitle">Blog Title</h3>
    </div>
    <div class="row" id="blogFeed2">
      <div class="col-md-12 hidden-sm hidden-xs">
        <img class="img-responsive" src="https://placehold.it/100x100" id="thumbNail2" />
        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
      </div>
    </div>
    <div class="row">
      <h3 class="blogTitle">Blog Title</h3>
    </div>
    <div class="row" id="blogFeed3">
      <div class="col-md-12 hidden-sm hidden-xs">
        <img class="img-responsive" src="https://placehold.it/100x100" id="thumbNail3" />
        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
      </div>
    </div>
  </div>
  <div class="row" id="scrollDown">
    <button id="downClick"><i class="fa fa-chevron-circle-down fa-2x"></i>
    </button>
  </div>
</div>