通过按钮可滚动 Div，没有滚动条

您有两个 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>

这是我能为你做的最好的起点，有一些重叠的问题，但也许这会有所帮助？

<script>
$(document).ready(function() {
    $(document).on( "click", "#upClick", function() {
        var top = $("#blogFeed1").css('margin-top').replace(/[^-'d'.]/g, '');
        $("#blogFeed1").css('margin-top', top+100+'px');
     }); 
    $(document).on( "click", "#downClick", function() {
        var top = $("#blogFeed1").css('margin-top').replace(/[^-'d'.]/g, '');
        $("#blogFeed1").css('margin-top', top-100+'px');
     }); 
});
</script>