youtube side bar-scroll control

Tweet

 <nav>
    <ul style="padding:40px;" id="uli">
        <li>
            <a href="#10"><img src="thumbimages/aaviskar.png" width="110" style="margin-bottom:5px;" /></a>
        </li>
       
           <li>
            <a href="#16"><img src="thumbimages/daksha2.png" width="110"  style="margin-bottom:5px;"/></a>
        </li>
       
        <li>
            <a href="#11"><img src="thumbimages/nehru.png"  width="110" style="margin-bottom:5px;"/></a>
        </li>
              <li>
            <a href="#17"><img src="thumbimages/daksha1.png" width="110" style="margin-bottom:5px;" /></a>
        </li>
       
        <li>
            <a href="#13"><img src="thumbimages/black.png" width="110" style="margin-bottom5px;" /></a>
        </li>
      
        <li>
            <a href="#12"><img src="thumbimages/dhall.png" width="110"  style="margin-bottom:5px;"/></a>
        </li>
   
           
       
       
       
        <li>
            <a href="#14"><img src="thumbimages/aaga.png" width="110" style="margin-bottom:5px;" /></a>
        </li>
        <li>
            <a href="#15"><img src="thumbimages/maharajroof.png" width="110"  style="margin-bottom:5px;"/></a>
        </li>
    
 
    </ul>
</nav>
             


implement this in header section



<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
   
    $('nav ul li a').click(function(){
   
        var el = $(this).attr('href');
        var elWrapped = $(el);
       
        scrollToDiv(elWrapped,300);
       
        return false;
   
    });
   
    function scrollToDiv(element,navheight){
   
       
   
        var offset = element.offset(90);
        var offsetTop = offset.top;
        var totalScroll = offsetTop-navheight;
       
        $('#b2').animate({
                scrollTop: totalScroll
        },500);
   
    }
   
   
   
});
</script>