JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/brandonaaron/jquery-mousewheel/master/jquery.mousewheel.js"></script>
<script src="https://raw.github.com/greenlaw110/scroller/master/jquery.zyngaScroller.js"></script>
<div class="viewport">
        <div class="page">
            <div class="c">Target 1</div>
            <div class="c">Target 2</div>
            <div class="c">Target 3</div>
            <div class="c">Target 4</div>
            <div class="c">Target 5</div>
        </div>
</div>
<button id="reset">Reset</button>

CSS

.viewport {
    background-color: #aaa;
    position:absolute;
    top: 100px;
    left: 100px;
    width: 280px;
    height: 200px;
    overflow: hidden;
}

.page {background-color: #eee; position:relative;width: 380px; height: 300px;}

.page div.c {position: relative; float: left; margin: 20px; width: 100px; height: 60px;background-color: #fff}

JavaScript

$(function(){
    $('div.page').scroller({zooming: true});
        
        $('#reset').click(function(){
            var scroller = $('.page').data('scroller');
            scroller.zoomTo(1, true);
        })
})