Ir ao conteúdo
  • Cadastre-se
Caio Fagundes

Web page com scrolling automático

Recommended Posts

Fala galera,

 

Criei uma página web e gostaria que essa página rolasse automaticamente pra baixo e pra cima quando alguém entra nela.

 

Encontrei um comando no site stackoverflow.com que o cara faz isso com javascript. O problema é que quando copio e colo o comando, ele não funciona no meu arquivo.

Acho que tenho que colocar um javascript source no cabeçalho ou algo assim. mas não estou sabendo fazer.

 

Alguém pode me ajudar a fazer a comando funcionar no meu aquivo HMTL? É basicamente copiar e colar mas pelo fato de ser novato, não estou sabendo fazer isso.

 

 

Segue site: http://jsfiddle.net/QUCWe/

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

 

@Caio Fagundes Javascript se coloca no final do corpo do documento, e ele usou jquery.

<script src="http://code.jquery.com/jquery-3.1.0.min.js"></script>

 

//PARA CHAMAR O JQUERY

$(document).ready(function(){
//código 
});

 

Eu recomendo baixar do que colocar direto pela url: https://jquery.com/download/

 

o jquery ta na versao 3.1.0 talvez você precise arrumar o código

  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

Bom, o código no JSFiddle está meio errado... falta algumas coisas porque ele fica subindo e descendo.

De qualquer forma, não recomendo que copie e cole. TENTE entender como funciona.

Basicamente é a função animate que faz a magia. dê uma estudada nele.

  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

@FabianoS @dif

 

Valeu pela ajuda galera, mas decifrando o código e pegando as dicas de vocês eu consegui. Consegui fazer com jquery 1.7 mesmo.

 

Vou mandar o código no notepad. Salvando o arquivo como .HTML e abrindo já dá certo!

Segue comando:

<html>

<head>

<!------------------------COMMAND TO SCROLLING PAGE DOWN AN UP-------------------------------------> 

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.js"></script> 
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css"> 
<style type="text/css">    
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
function scroll(speed) {
    $('html, body').animate({ scrollTop: $(document).height() - $(window).height() }, speed, function() {
        $(this).animate({ scrollTop: 0 }, speed);
    });
}
speed = 10000;
scroll(speed)
setInterval(function(){scroll(speed)}, speed * 2);
});//]]> 

</script>

</head>

example.txt

  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora





Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×