More than 5 years have passed since last update.

スクロールバーをjQueryからスクロールさせるコード

jQuery

Posted at 2013-04-19

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <script src="./js/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
  $('#leftbutton').click(function(){
    var i = $('#browser').scrollLeft() - 300;
    if (i < 0) {
       i = 0;
     }
     $('#browser').animate({
         scrollLeft : i
     });
  });
  $('#rightbutton').click(function(){
    var i = $('#browser').scrollLeft() + 300;
    var max_value = $('#browser').scrollWidth - $('#browser').clientWidth;
    if (max_value < i) {
       i = max_value;
     }
     $('#browser').animate({
         scrollLeft : i
     });
  });
});
</script>
  </head>
  <body>
      <a href="#" id="leftbutton">left-button</a>
    <div id="browser"  style="width:300px; height:300px; overflow: auto;">
      <div id="content" style="background-color: black;width:900px; height: 300px;">
      </div>
    </div>
      <a href="#" id="rightbutton">right-button</a>
  </body>
</html>

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up