Scoll inside div with positionning animation

with nicescroll

by Plippie Plop

HTML

<script src="https://cdn.rawgit.com/inuyaksa/jquery.nicescroll/master/jquery.nicescroll.js"></script>
<div id="index">
    <ul> <li><a href="#index_a">Header one</a></li> 
<li><a href="#index_v">Header two</a></li> <li><a href="#index_w">Header three</a></li> </ul> </div>

<div id="previewer">
    <div class="scroll-wrap">
        <h3 id="index_0" class="go-top">Top <span>Move to top</span></h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eleifend sapien erat, at tempus ligula congue eleifend. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque et dapibus mi. Pellentesque ut convallis sapien. Nam tincidunt porta nulla sodales pretium. Donec sed purus sit amet ipsum commodo semper. Duis ac nisi lectus. Phasellus rutrum tempus diam lobortis euismod. Duis euismod et quam eu lacinia. Phasellus at tellus leo. Phasellus vitae eros non nunc pharetra convallis. Suspendisse odio sem, vehicula a viverra nec, porta ac tellus. Aliquam mollis nibh et nibh volutpat pellentesque. Sed tincidunt porta tortor sed mattis.</p>
    <h3 id="index_a" class="go-top">Header one <span>Move to top</span></h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eleifend sapien erat, at tempus ligula congue eleifend. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque et dapibus mi. Pellentesque ut convallis sapien. Nam tincidunt porta nulla sodales pretium. Donec sed purus sit amet ipsum commodo semper. Duis ac nisi lectus. Phasellus rutrum tempus diam lobortis euismod. Duis euismod et quam eu lacinia. Phasellus at tellus leo. Phasellus vitae eros non nunc pharetra convallis. Suspendisse odio sem, vehicula a viverra nec, porta ac tellus. Aliquam mollis nibh et nibh volutpat pellentesque. Sed tincidunt porta tortor sed mattis.</p>
        <h3 id="index_v" class="go-top">Header two <span>Move to top</span></h3> 
    <p> Lorem ipsum dolor sit...

CSS

#previewer {
    font-family:verdana;
    font-size:15px;
    height: 300px;
    overflow: hidden;
    border: 2px solid #afafaf;
    position:fixed;
    width:300px;
    left:50%;
    margin-left:-150px;
    z-index:200;
    border-radius:6px;
    box-shadow:         7px 7px 5px rgba(50, 50, 50, 0.75);
}

.scroll-wrap{
    position:absolute;
}

h3 {font-size:16px;font-weight:bold;
    display:block;
    border:1px solid #efefef;
    padding:5px;
}

h3 span{
  display:inline-block;
    float:right;
        font-size:10px;
    padding:3px;
    border:1px solid #afafaf;
    border-radius:6px;
    background:#999;
    color:#fff;
    cursor:pointer;
}

JavaScript

/*
Test scrolling inside container.
Test the header one, two etc links.
Test the move to top buttons inside the container;

Notice how the scrollbar gets confused after using the link or button animate events. 

Notice the scroll-wrap gets moved up and not getting back so you cant get back the top most item.

If you try to scroll all the way to the bottom the scrollbar remembers his original position again. But now the Link events behave sporadic.
*/

var preview = $('#previewer');

$('div#index ul li a').on('click',function() {
    var getElem = $($(this).attr('href'));
    var elPos = getElem.offset().top;
    var previewPos = preview.offset().top;
    var topPos = elPos - previewPos
    
    //preview.animate({
//                scrollTop: '+=' + topPos
     //       }, 200);

   //does nothing:
  //preview .getNiceScroll().resize();
    console.log(topPos);
   preview.getNiceScroll().doScrollTop(topPos,100);
    
});

preview.niceScroll('.scroll-wrap');


$('.go-top').on('click',function(){
    var elPos = $(this).offset().top;
    var previewPos = preview.offset().top;
    var topPos = elPos - previewPos
    
    // testing it on the container does the animation but scrollbar gets confused:
    preview.animate({
        scrollTop: '+=' + topPos
    }, 200);
    
    
    // testing it on the scroll wrapper does nothing:
    /*
    $('.scroll-wrap').animate({
        scrollTop: '+=' + topPos
    }, 200);
    */
    
    // doing a time out after top animation does nothing:
     setTimeout(function(){
         preview.getNiceScroll().resize();
     },280);
   
    
    //stil in beta and not useable:    
    //preview.getNiceScroll().doScrollTop(elPosition, 100);
    
});