Собственно суть. Создаю на сайте вкладки.
<div id="main_tabs">
<div class="tabs">
<span data-href="#1_tab"></span>
<span data-href="#2_tab"></span>
</div>
<div id="tabs_content">
<div id="1_tab">some text</div>
<div id="2_tab">some text</div>
</div>
</div>
var tabs = $('#main_tabs');
$('#tabs_content > div', tabs).each(function(i) {
if (i != 0) $(this).hide(0);
});
tabs.on('click', '.tabs span', function(e) {
/* Узнаем значения ID блока, который нужно отобразить */
var tabId = $(this).attr('data-href');
/*Узнаем расположение контента*/
destination = $('#tabs_content').offset().top;
/* Удаляем все классы у якорей и ставим active текущей вкладке */
$('.tabs span', tabs).removeClass();
$(this).addClass('active');
/* Прячем содержимое всех вкладок и отображаем содержимое нажатой */
$('#tabs_content > div', tabs).hide();
$('html,body').stop().animate({ scrollTop: destination }, 1000);
$(tabId).show();
});
Задача - плавный скролл к контенту, особенно актуально для мобильных, т.к. при некотором положении страницы относительно области просмотра пользователь может не заметить, что контент сменился.
Все хорошо ровно до того момента, когда контент у нас контент уже находится на примерно необходимом месте, получается, что в начале область просмотра отскакивает на необходимое расстояние, а потом уже прокручивает страницу до нужного элемента.
Думал задать доп проверку на текущее положение области с контентом относительно облатси просмотра (когда и так отлично видно, что контент меняется), но не совсем понимаю как это сделать.
codepen.io/SlowDream/pen/ZQdLPE 
