Прокручиваемый Div с помощью кнопок и без полосы прокрутки

Я знаю, что эта тема освещалась много раз, но все, что я просмотрел и попробовал, не совсем работает. Надеюсь, что предоставление моего реального кода приведет к решению. У меня есть прокрутка вверх, но кнопка "вниз" ничего не делает. Попытка использовать кнопки для прокрутки только внутри этого div "homeBlogs". Вот код, который я использую:

$(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 ответа

Решение

У вас есть две кнопки с идентификатором downClick, и нет кнопок с идентификатором 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>
Источник
Другие вопросы по тегам