Scrollable Div通过按钮而没有滚动条

时间：2016-01-15 19:44:26

标签： javascript jquery scroll scrolltop

我知道这个主题已被多次覆盖，但我所看到和尝试过的所有内容都不太合适。希望提供我的实际代码将导致解决方案。我已经滚动起来工作了，但是向下按钮却什么也没做。尝试使用按钮仅在此“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>

2 个答案:

答案 0 :(得分：3)

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

答案 1 :(得分：1)

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

<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>
相关问题
最新问题