Percebi alguns problemas no código:
1º. Ao usar o animate
do jQuery com âncoras, não use name="alvo"
; use id="alvo"
. Portanto altere tudo que tiver name="alvo"
para id="alvo"
(ex., name="datas"
para id="datas"
). Mude também a tag de <a>
para <div>
, ficando <div id="alvo"></div>
.
2º. Esta forma de capturar o click:
$('a[href*=#]').bind("click", function(e) {
Além de faltar aspas no #
, procure não usar .bind
, porque já foi descontinuado a partir da versão 3 do jQuery. Em vez disso, use .on()
.
Outra coisa, parece que esses <a>
referenciados são dinâmicos e o jQuery não está conseguindo identificá-los. Para resolver isso, altere a forma de captura para:
$(document).on("click", 'a[href*="#"]', function(e) {
3º. Este código:
var scrollToPosition = $(target).offset().top - 101;
Percebi que 101
não é o valor correto. Use algo em torno de 200
porque precisa compensar aquele topo acima do menu. Então ficaria:
var scrollToPosition = $(target).offset().top - 200;
Então o código ficaria assim:
$(document).on("click", 'a[href*="#"]', function(e) {
var target = $(this).attr("href"); //Get the target
var scrollToPosition = $(target).offset().top - 200;
$('html,body').animate({ 'scrollTop': scrollToPosition }, 600, function(){
window.location.hash = target;
});
e.preventDefault();
});