Estou tentando inserir esse valor no scrollTop mas não esta retornando, algum problema?
var top = $('.sku').offset().top;
$(window).animate({
scrollTop: top
}, 500)
Stack Overflow em Português é um site de perguntas e respostas para programadores profissionais e entusiastas. Leva apenas um minuto para se inscrever.
Inscreva-se para participar desta comunidadeCertifique-se de pegar a posição do elemento depois de ele ter sido renderizado, veja o exemplo:
<head>
... estilos e tudo mais
<script>
var top = $("div").offset().top; // vai retornar 0, porque o elemento ainda não foi renderizado
</script>
</head>
<body>
<div style="top: 200px;">Teste</div>
<script>
var top = $("div").offset().top; // vai retornar o valor correto pois o elemento foi renderizado
</script>
</body>
Como boas práticas recomenda-se colocar o javascript
(inclusive os imports) no final da pagina antes do fechamento da tag <body>
, pois o navegador bloqueia a renderização até que esses scripts sejam carregados:
<body>
... Seu conteudo html
// Vai carregar js depois que a pagina for renderizada
<script type="text/javascript" src="arquivo.js"></script>
<script>
... Seus scripts
</script>
</body>
E ainda você pode usar o document.ready do Jquery
para executar um script apenas quando o documento estiver pronto:
<script>
$(document).ready(function() {
altert("pronto");
})
// ou a versão simplificada dele
$(function() {
altert("pronto");
})
</script>
Em principio o valor deve estar a ser passado correctamente, no entanto, a animacao só parece funcionar se usares no $("html, body")
.
Assim
var top = $(".sku").offset().top;
$("html, body").animate({ scrollTop: top }, 500);
top
? certifique-se de que o elemento já tenha sido renderizado para pegar a posição dele, senão sempre vai retornar 0.$(document).ready(function(){ ... })
ou$(function(){ .. })
?javascript
no final da tag<body>
, antes do fechamento dela.