Плавный прокрутка к элементу div в div с помощью jQuery

Question

Я пытаюсь работать над тем, что, как я думал, будет довольно простым эффектом сглаживания, что привело к большому разочарованию и путанице, вот почему я пришел сюда за помощью (I «м иногда не формулируя вещи так хорошо, поэтому, пожалуйста, поправьте меня, или скажите мне, если что-то непонятно, спасибо)

то, что я хотел бы достичь, это:

гладкая прокрутки DIV-х, которые внутри DIV элемент. И в это время 2, поэтому будет два элемента меню и 2 div, содержащие элементы div, которые я хочу прокрутить.

Я попробовал многочисленную вещь:

balupton.scrollto плагин: Означает ли это, но так или иначе он прыгает обратно карапуз на вершине прежде, чем она прокручивается к выбранному элементу.

flesler's jquery.scrollTo: Невозможно заставить его работать с divs внутри div.

А потом JQuery Scrolltop: Это как-то продолжал получать координаты DIV неверного

Я сделал быстрый jsfiddle с 1 меню и один DIV, чтобы дать представление: https://jsfiddle.net/6wmtfuuv/

HTML

<div id="nav"> 
<a href="#pro1" id="project1"> button1 </a> <br><br> 
<a href="#pro2" id="project2"> button2 </a> <br><br> 
<a href="#pro3" id="project3"> button3 </a> <br><br> 
<a href="#pro4" id="project4"> button4 </a> <br><br> 
<a href="#pro5" id="project5"> button5 </a> <br><br> 
<a href="#pro6" id="project6"> button6 </a> <br><br> 
</div> 

<div id="wrapperleft"> 
<div id="pro1">this is pro 1 </div>   
<div id="pro2">this is pro 2 </div>   
<div id="pro3">this is pro 3 </div>   
<div id="pro4">this is pro 4 </div>   
<div id="pro5">this is pro 5 </div>        
<div id="pro6">this is pro 6 </div> 
</div> 

CSS

#wrapperleft { 
position:absolute; 
left:0px; 
top:0px; 
height:100%; 
overflow:scroll; 
} 

#pro1,#pro2,#pro3,#pro4,#pro5,#pro6 { 
position:relative; 
height:800px; 
width:300px; 
} 

#nav { 
position:fixed; 
z-index:200; 
top:20px; 
right:20px; 
} 

Answer 1

у меня есть this gist, который показывает все, что необходимо для достижения этого. Я вставляю содержимое здесь, поэтому нет необходимости заходить внутрь.

<!-- Include jQuery from somewhere, must use version 1.8 or above --> 
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<script type="text/javascript"> 
    $('html, body').animate({ 
    scrollTop: $("#target-element").offset().top 
    }, 4000); 
</script> 

Это должно помочь вам реализовать его.