Web page com scrolling automático

Caio Fagundes · 23 de agosto de 2016

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/

FabianoS · 23 de agosto de 2016

@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

DiF · 23 de agosto de 2016

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.

Caio Fagundes · 24 de agosto de 2016

@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>