1

Im trying to force a div a have to scroll horizontally but i need it to scroll smoothly and not just jump to where i need it to go.

This is what i am using.

<html>
<img onclick="scroll();" class="slidearrows" src="images/left.png" />
<html/>

<script>
    function scroll() {
    document.getElementById('scrl-bar').scrollLeft = 1200;  
    }
<script>

now this is working but it just jumps and doesnt go smoothly. Can anyone please help me make it go smoothly.

Ronni Mallouk
  • 11
  • 1
  • 3

1 Answers1

-1

With jquery:

$('.slidearrows').on('click', function () {
    $('html,body').animate({scrollLeft: 0}, 1800); // 1800 is the milliseconds to scroll
});
phpmeh
  • 1,752
  • 2
  • 22
  • 41
  • how would i get that to scroll my div, sorry man i new and learning. Wouldnt i need to put in there my div id? – Ronni Mallouk Aug 11 '17 at 06:40
  • Hi, in JQuery, $(".slidearrows") will pick any HTML tag that has that class assigned to it. In the HTML you posted, there wasn't an ID, just that class. You should be able to put this code into your javascript (after you've loaded JQuery onto your page), and it should work. – phpmeh Aug 11 '17 at 06:43
  • Thanks heaps through your code i was able to figure this out and works exactly the way i wanted it to. :) function scroll() { $('#scrl-bar').animate({scrollLeft: '1800'}, 800, 'linear'); } – Ronni Mallouk Aug 11 '17 at 07:24
  • Glad you got it working :) – phpmeh Aug 13 '17 at 18:25