Alex Alex - 2 months ago 7
CSS Question

How to make interactive buttons that scrolls vertical divs?

Lets say I have these divs that are products and

<div class="container">
<div class="product">
<div class="image"><img class="img-responsive" src="http://www.shingpoint.com.pk/Images/Thumbnails/pc-a1-470-59100-080316082835.jpg"/></div>
<div class="description"><h4 class="productname">ASUS VivoMini PC - UN65H-M030M</h4></div>
<div class="price">
<span>Rs. 37,900</span>
<input type="button" class="btn btn-primary btn-sm" value="Details"/>
</div>
</div>
<div class="product">
<div class="image"><img class="img-responsive" src="http://www.shingpoint.com.pk/Images/Thumbnails/pc-a1-470-59100-080316082835.jpg"/></div>
<div class="description"><h4 class="productname">ASUS VivoMini PC - UN65H-M030M</h4></div>
<div class="price">
<span>Rs. 37,900</span>
<input type="button" class="btn btn-primary btn-sm" value="Details"/>
</div>
</div>
</div>


There are only 2 products due to 'stackoverflow restriction of mostly-code'. Lets say there are 10 of these products and I want to display 5 of them and rest would be shown one by one as per click on forward and backward buttons just like facebook have when viewing photos.

Answer

You can set your class='container div to a specific height. If your items' height is, let say, 200px you can set your container to 400px. Then on button click you can scroll container div. Your code will look like this:

<script>

function scrollOneItem(){
    var container = document.getElementByClassName('container');
    container.scrollTop = container.scrollHeight + 200;
}

</script>

<button onClick="scrollOneItem()">Scroll down</button>
<div class="container">
...
</div>
Comments