Primeiro que o:
window.location.href = target_id;
Irá levar diretamente ao elemento, sem o scroll, mas creio que isso já imaginava
Segundo, com todo respeito e me perdoem de antemão, mas a resposta do EliseuB esta errada, não tem sentido passa o valor do ID para o scrollTop
:
let target_id = $(this).find('a').attr('id_ou_name');
$('html, body').animate({scrollTop: target_id}, 300);
scrollTop espera um numero e não uma referencia ID de um elemento HTML, por isto não funciona, o correto seria pegar o offset().top
do elemento que deseja que o scroll atinga, segue a documentação:
Aqui no proprio site já tem um exemplo bastante intuitivo de como é o minimo correto:
Apesar de que tem como melhorar, como por exemplo o seletor poderia ser algo como:
a[href^="#"]
Para afetar somente links que comessem com HASH, para resumir o seu código poderia ficar assim:
$("#pages .page:not('.hide')").stop().fadeOut('fast', function() {
$(this).addClass('hide');
var currentPage = $('#pages .page[data-page="' + page + '"]');
currentPage.fadeIn('slow', function() {
$(this).removeClass('hide');
$('html,body').animate({ scrollTop: currentPage.offset().top });
});
});
Veja o exemplo funcionando:
$(document).ready(function() {
//Função que mostra o conteúdo de acordo com o botão clicado (menu)
$("#menu li a[href^='#']").on('click', function(e) {
e.preventDefault();
var target_id = $(this).attr('href');
var page = $(this).data('page');
$("#pages .page:not('.hide')").stop().fadeOut('fast', function() {
$(this).addClass('hide');
var currentPage = $('#pages .page[data-page="' + page + '"]');
currentPage.fadeIn('slow', function() {
$(this).removeClass('hide');
$('html,body').animate({ scrollTop: currentPage.offset().top });
});
});
});
//Função que insere a classe Active no botão que foi clicado (menu)
$("#menu li").on('click', function() {
$(this).siblings().removeClass('actives');
$(this).addClass('actives');
});
});
#pages .page {
min-height: 900px;
}
#pages #sobre {
background: #fc0;
}
#pages #teste {
background: #cfcfcf;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="store container">
<ul id="menu">
<li>
<a data-page="sobre" href="#sobre">
<h2> Sobre </h2>
</a>
</li>
<li>
<a data-page="teste" href="#teste">
<h2> Teste </h2>
</a>
</li>
</ul>
</div>
<div id="pages">
<section id="sobre" class="page style" data-page="sobre">
<header>
<h2> aaaa </h2>
</header>
<p class="text">aaaaaaaaaaaaaaaa.</p>
</section>
<section id="teste" class="page style" data-page="teste">
<header>
<h2> bbbb </h2>
</header>
<p class="text">bbbbbbbbbbbbbbbb.</p>
</section>
</div>