How to scroll left-right with buttons with javascript smoothly?

Question

I use this code to scroll my div content with left and right buttons. This simple code is very useful I can use it anywhere. So I just need to know how to scroll when these buttons smoothly. By editing this piece of javascript code can I scroll smoothly when I click the buttons?

 const buttonRight = document.getElementById('slideRight'); const buttonLeft = document.getElementById('slideLeft'); buttonRight.onclick = function () { document.getElementById('container').scrollLeft += 150; }; buttonLeft.onclick = function () { document.getElementById('container').scrollLeft -= 150; };

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

 <div id="container"> <div id="content">Click the buttons to slide horizontally!</div> </div> <button id="slideLeft" type="button">Slide left</button> <button id="slideRight" type="button">Slide right</button>

Answer 1

You can use css scroll-behavior: smooth; on the container element:

 const rightButtons = Array.from(document.getElementsByClassName('slideRight')); const leftButtons = Array.from(document.getElementsByClassName('slideLeft')); const containers = Array.from(document.getElementsByClassName('container')); let index = 0; for (const rightButton of rightButtons) { const container = containers[index]; rightButton.addEventListener("click", function () { container.scrollLeft += 150; }); index++; } index = 0; for (const leftButton of leftButtons) { const container = containers[index]; leftButton.addEventListener("click", function () { container.scrollLeft -= 150; }); index++; }

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

 <div class="container"> <div class="content">Click the buttons to slide horizontally!</div> </div> <button class="slideLeft" type="button">Slide left</button> <button class="slideRight" type="button">Slide right</button> <div class="container"> <div class="content">Click the buttons to slide horizontally!</div> </div> <button class="slideLeft" type="button">Slide left</button> <button class="slideRight" type="button">Slide right</button>