Automatic scroll to the right

Question

Is there any way in jquery when clicking a page button or a div to do a small scroll automatically?

Answer 1

Answer presented in the OS

Transcription

scrollLeft is scrollRight. What it does is horizontal scrolling.
If you set it to 0 then it will totally go left.
If you set it to > that 0 then it will go right.

If you want to make it moving then you will have to get the size of it and go incrementing.

$(".leftArrow").click(function () { 
  var leftPos = $('.innerWrapper').scrollLeft();
  $(".innerWrapper").animate({scrollLeft: leftPos - 200}, 800); // MOVE PARA ESQUERDA 
});

$(".rightArrow").click(function () { 
  var leftPos = $('.innerWrapper').scrollLeft();
  $(".innerWrapper").animate({scrollLeft: leftPos + 200}, 800); // MOVE PARA DIREITA
});

Answer 2

$('#gdb1').click(function(){
    $("html, body").animate({ scrollTop: $(window).height()}, 600);
    return false;
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="gdbox">
    <button id="gdb1" class="gdbutton fontwhitenshadow">Q</button>
</div>


<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam beatae quas esse explicabo modi odio nesciunt vero error obcaecati ea sequi alias quam facilis delectus odit aperiam repellat similique corrupti.</div>
<div>Aspernatur sit eveniet debitis voluptatibus optio dignissimos asperiores illum nisi eum minima quidem quis modi dolorem hic nobis qui deleniti veniam obcaecati est odio ea molestias vitae nesciunt deserunt maxime.</div>
<div>Accusamus voluptate tempora placeat explicabo sapiente quas ex perferendis reiciendis sed sit recusandae aut molestias libero itaque fugiat velit nihil minus enim vel illo id cum dignissimos. Vitae quod autem.</div>
<div>Amet est asperiores nulla ipsam quos provident voluptatibus dignissimos minima facilis similique necessitatibus repellendus excepturi accusamus dolore velit earum autem inventore vero enim deserunt sed id quo omnis officia obcaecati.</div>
<div>Quo dolorem eum sed aut maiores tempora incidunt soluta. Beatae iure vitae aspernatur porro dignissimos natus eos veritatis dolor quis adipisci. Provident illum veniam ratione in omnis ducimus beatae. Laudantium.</div>
<div>Veniam commodi totam possimus rem excepturi aut est. Voluptatibus corrupti consectetur cupiditate officiis corporis distinctio tempore maxime ducimus id aliquam eaque sint rem earum. Voluptatum dolorum quam repellendus maxime autem!</div>
<div>Mollitia ab alias impedit repellendus sed ut distinctio aliquam sunt aperiam minus perferendis eos. Natus minus adipisci unde maiores commodi debitis a. Atque non quia labore dolore at fuga quos!</div>
<div>Autem doloremque ipsa voluptatibus harum laboriosam mollitia inventore nesciunt suscipit voluptatum atque in corrupti itaque provident sunt ex voluptates veniam consequatur fugiat facere libero dignissimos officiis eius officia! Quasi exercitationem!</div>
<div>Sit ab voluptatibus error velit tenetur placeat totam omnis quam molestiae id nemo necessitatibus a repellat quaerat esse rerum assumenda accusamus numquam reprehenderit odit. Eos odio veniam necessitatibus laudantium mollitia!</div>
<div>Porro reprehenderit quia corporis reiciendis aperiam neque earum illo quidem quasi modi doloribus debitis. Reprehenderit officiis doloribus ab doloremque veritatis nam minima placeat illum iusto. Aliquam ipsa a hic ex.</div>
<div>Mollitia laboriosam accusamus quidem reprehenderit dolorum quae pariatur voluptatem magnam atque odio facilis suscipit vero eos vitae tempore corporis molestias quisquam nobis culpa ducimus sint sunt illo aliquam nesciunt ipsam.</div>
<div>Dolor aliquid iure debitis odio dignissimos id nesciunt dicta harum temporibus quibusdam sed eaque quae incidunt cumque at consectetur nemo adipisci officia optio nobis sunt autem dolorem culpa explicabo libero.</div>
<div>Ex doloribus veniam unde tenetur quisquam deleniti minus accusantium quod quia suscipit iusto modi dolore fuga eos optio autem provident quae in voluptatem temporibus quasi dolorum odio eius doloremque et!</div>
<div>Pariatur dolorem laudantium repellat ipsam asperiores minima optio eum. Minima reiciendis velit praesentium necessitatibus pariatur vero architecto inventore numquam veritatis obcaecati eos quos fugit eaque in distinctio repudiandae similique quia.</div>
<div>Illo nulla aliquam deleniti recusandae sunt facilis aperiam unde ipsa nemo necessitatibus eius laborum eligendi maxime obcaecati sapiente harum officia incidunt delectus a voluptatum. Soluta rem aperiam sapiente quis necessitatibus.</div>
<div>Reprehenderit fuga architecto consequatur accusantium dignissimos deserunt quia laudantium provident veniam earum rem culpa eos voluptate magni dolores autem dicta numquam blanditiis dolorem repellat officia repudiandae unde illum quam excepturi!</div>
<div>Tempora porro perspiciatis quod debitis facilis aspernatur sunt obcaecati fugiat dignissimos est alias nihil reiciendis hic doloribus expedita suscipit dicta? Corporis quo eveniet in obcaecati beatae ipsam. Dolores non obcaecati.</div>
<div>Incidunt nam quo quod aspernatur nemo molestias quisquam a laudantium officia animi cumque ea! Optio ipsam quaerat soluta eaque quae nam quod sapiente similique totam dolor praesentium fuga eveniet sed!</div>
<div>Iusto illo cum quo qui modi nobis exercitationem at similique nihil eius vel odio enim dicta praesentium deleniti incidunt esse provident magnam optio reprehenderit nemo culpa libero cupiditate molestias amet.</div>
<div>Libero dignissimos eos error nihil omnis eius quaerat dolore tempore quae quo similique harum debitis sapiente voluptates soluta ullam ab recusandae quia rem atque. Beatae non assumenda nihil tenetur deserunt!</div>

At the click of the button, you go to the bottom of the page.

Answer 3

I will put an example of how it could be done using pure javascript only, since the answers of the others is already done with jquery:

document.addEventListener('DOMContentLoaded', function() {
  var button = document.getElementById('slide');
  button.onclick = function() {
    document.getElementById('container').scrollLeft += 20;
  };
}, false);

#container {
  border: 1px solid #ccc;
  height: 100px;
  overflow: scroll;
  width: 100px;
}
#content {
  background-color: #ccc;
  width: 250px;
}

<div id="container">
  <div id="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
<button id="slide" type="button">Direita >></button>