Scoll inside div with positionning animation
with nicescroll
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.5.1/jquery.nicescroll.min.js"></script>
<div id="vb-vocpanel">
<div id="vb-vocabulario">
<div id="vb-btn0" class="vb-btnvoc"><span>1</span></div>
<div id="vb-btn1" class="vb-btnvoc"><span>2</span></div>
<div id="vb-btn2" class="vb-btnvoc"><span>3</span></div>
<div id="vb-btn3" class="vb-btnvoc"><span>4</span></div>
<div id="vb-btn4" class="vb-btnvoc"><span>5</span></div>
<div id="vb-btn5" class="vb-btnvoc"><span>6</span></div>
<div id="vb-btn6" class="vb-btnvoc"><span>7</span></div>
<div id="vb-btn7" class="vb-btnvoc"><span>8</span></div>
<div id="vb-btn8" class="vb-btnvoc"><span>9</span></div>
<div id="vb-btn9" class="vb-btnvoc"><span>10</span></div>
<div id="vb-btn10" class="vb-btnvoc"><span>11</span></div>
<div id="vb-btn11" class="vb-btnvoc"><span>12</span></div>
<div id="vb-btn12" class="vb-btnvoc"><span>13</span></div>
<div id="vb-btn13" class="vb-btnvoc"><span>14</span></div>
<div id="vb-btn14" class="vb-btnvoc"><span>15</span></div>
<div id="vb-btn15" class="vb-btnvoc"><span>16</span></div>
<div id="vb-btn16" class="vb-btnvoc"><span>17</span></div>
<div id="vb-btn17" class="vb-btnvoc"><span>18</span></div>
<div id="vb-btn18" class="vb-btnvoc"><span>19</span></div>
<div id="vb-btn19" class="vb-btnvoc"><span>20</span></div>
<div id="vb-btn20" class="vb-btnvoc"><span>21</span></div>
<div id="vb-btn21" class="vb-btnvoc"><span>22</span></div>
<div id="vb-btn22"...
CSS
#vb-vocpanel,
.vb-btnvoc{
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
#vb-vocpanel {
padding: 0;
height: 500px;
width: auto;
max-width: 2122px;
border: 1px solid #bbb;
margin: 0 30px 0 30px;
overflow: auto;
}
#vb-vocabulario {
position: relative;
width: 2122px;
height: 500px;
}
.vb-btnvoc {
position: absolute;
cursor: pointer;
border-radius: 50%;
border-style: solid;
border-color: #ffffff;
border-width: 2px;
background-color: #ffa700;
width: 40px;
height: 40px;
font-size: 1em;
color:#ffffff;
font-weight: bold;
line-height: 40px;
}
.vb-btnvocactive {
background-color: #0058ff;
}
.vb-btnvocachieved {
background-color: #00a306;
}
.vb-btnvoc span {
display: block;
margin: auto;
text-align:center;
}
/***************************************************************
Comienzo del posicionamiento de los diferentes Botones
***************************************************************/
#vb-btn0 {top: 375px;left: 480px;}
#vb-btn1 {top: 175px;left: 1300px;}
#vb-btn2 {top: 225px;left: 2025px;}
#vb-btn3 {top: 350px;left: 2025px;}
#vb-btn4 {top: 440px;left: 1600px;}
#vb-btn5 {top: 200px;left: 965px;}
#vb-btn6 {top: 390px;left: 380px;}
#vb-btn7 {top: 270px;left: 1020px;}
#vb-btn8 {top: 340px;left: 600px;}
#vb-btn9 {top: 380px;left: 250px;}
#vb-btn10 {top: 200px;left: 350px;}
#vb-btn11 {top: 215px;left: 1780px;}
#vb-btn12 {top: 150px;left: 2000px;}
#vb-btn13 {top: 280px;left: 915px;}
#vb-btn14 {top: 130px;left: 1775px;}
#vb-btn15 {top: 400px;left: 540px;}
#vb-btn16 {top: 320px;left: 1600px;}
#vb-btn17 {top: 190px;left: 580px;}
#vb-btn18 {top: 180px;left: 1820px;}
#vb-btn19 {top: 230px;left: 1315px;}
#vb-btn20 {top: 280px;left: 1510px;}
#vb-btn21 {top: 270px;left:...
JavaScript
/*
Test scrolling inside container.
Test the header one, two etc links.
*/
$('#vb-vocpanel').niceScroll('#vb-vocabulario',{
cursoropacitymin: 0,
cursorborder: '#FFF',
cursorcolor: '#999',
});
$('#vb-vocpanel .vb-btnvoc').click(function () {
$(this).addClass('vb-btnvocactive');
});