Ребят, сделал скролл в модальном окне и в меню табов сделал 'якорь' , должно было получится , что при нажатии определенного таба контент плавно переходил вниз или верх но получилось так , что когда нажимаю на второй таб контент резко переходит вниз аналогично и с первым табом и еще одна ошибка что действие можно выполнять всего лишь один раз и потом табы не работают до перезагрузки страницы . что я сделал не так
$(document).ready(function(){
$("#menu").on("click","a", function (event) {
event.preventDefault();
var id = $(this).attr('href'),
top = $(id).offset().top;
$('body,html').animate({scrollTop: top}, 1500);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="main">
<section id="tab1">
<video class="videocontent" controls poster="images/preview.jpg">
<source src="images/ps.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
</video>
</section>
<section id="tab2">
<img src="images/background.jpg">
</section>
</div>
<div class="leftcol">
<img class="img1" src="images/ps4.jpg">
<img class="img2" src="images/logo.jpg">
<div class="tabs" id="menu">
<ul class="nav">
<li class="nav_item">
<a href="#tab1">Video</a>
</li>
<li class="nav_item">
<a href="#tab2">Horizon Zero Dawn</a></br>
</li>
<li class="nav_item">
<a href="#tab3">Through Aloy's Eyes</a>
</li>
</ul>
</div>
</div>
tab3
. Ну и скрол по идее может работать, только если есть куда скролить, те контент больше высоты окна и появился скроллбар