2

Tenho um código que rola a página ao topo, mas não quero que ele alcance o scrollTop = 0. É possível que ao clicar no botão, ele apenas suba um pouco a página para cima, como se eu tivesse teclado a seta para cima do teclado?

$(document).ready(function(){ $(window).scroll(function(){ 
	if ($(this).scrollTop() > 10) {
		$('#scroll').fadeIn();
	} 
	else { 
	    $('#scroll').fadeOut(); 
	} 
}); 

$('#scroll').click(function(){ $('html, body').animate({ scrollTop: 0 }, 600); 
return false; 
}); 
});
#scroll {position:fixed; right:10px; bottom:10px; cursor:pointer; width:40px; height:40px; background-color:#D80000; text-indent:-9999px; display:none; border-radius:60px; box-shadow:-1px 3px 7px rgba(0,0,0,.9)}
#scroll span {position:absolute; top:50%; left:50%; margin-left:-10px; margin-top:-17px; height:0; width:0; border:10px solid transparent; border-bottom-color:#fff}
#scroll:hover {background-color:#A80000; opacity:1}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

<body>
<p>Role a página para baixo...</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<a href='#' id='scroll' title='Voltar ao Topo'>Topo<span/></a>
</body>

1
  • 1
    Não seria apenas editar o valor chamado na função animate? $('#scroll').click(function(){ $('html, body').animate({ scrollTop: 50 }, 600);
    – Jorge.M
    4/10/2018 às 16:13

2 Respostas 2

4

Você pode ir rolando a tela "de tantos em tantos" pixels, até chegar no topo:

$(document).ready(function() {
    $(window).scroll(function() {
        if ($(this).scrollTop() > 10) {
            $('#scroll').fadeIn();
        } else {
            $('#scroll').fadeOut();
        }
    });

    $('#scroll').click(function() {
        $('html, body').animate({
            // aqui pega a posição atual e diminui
            scrollTop: $(window).scrollTop() - 50
        }, 600);
        return false;
    });
});
#scroll {position:fixed; right:10px; bottom:10px; cursor:pointer; width:40px; height:40px; background-color:#D80000; text-indent:-9999px; display:none; border-radius:60px; box-shadow:-1px 3px 7px rgba(0,0,0,.9)}
#scroll span {position:absolute; top:50%; left:50%; margin-left:-10px; margin-top:-17px; height:0; width:0; border:10px solid transparent; border-bottom-color:#fff}
#scroll:hover {background-color:#A80000; opacity:1}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Role a página para baixo...</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<a href='#' id='scroll' title='Voltar ao Topo'>Topo<span/></a>

Usei $(window).scrollTop() para pegar a posição atual e diminuir 50 pixels, basta por um valor que te atenda aqui e ir rolando até que chegue ao topo.

1
  • Ricardo, marco a tua resposta como a correta porque esse "- 50" era exatamente o que eu precisava! Agradeço também aos outros colegas que responderam, entretanto não quero rolar a página para um ponto específico e, sim, voltar tantos pixels de onde o usuário se encontra no momento. Valeu, pessoal!
    – winiercape
    4/10/2018 às 16:44
1

Vitor é assim, o correto na programação é sempre saber como as coisas são feitas e o que cada coisa faz. Aí no seu código é só mudar o valor da propriedade scrollTop de 0 para 50 por exemplo:

$(document).ready(function(){ $(window).scroll(function(){ 
	if ($(this).scrollTop() > 10) {
		$('#scroll').fadeIn();
	} 
	else { 
	    $('#scroll').fadeOut(); 
	} 
}); 

$('#scroll').click(function(){ $('html, body').animate({ scrollTop: 50 }, 600); 
return false; 
}); 
});
#scroll {position:fixed; right:10px; bottom:10px; cursor:pointer; width:40px; height:40px; background-color:#D80000; text-indent:-9999px; display:none; border-radius:60px; box-shadow:-1px 3px 7px rgba(0,0,0,.9)}
#scroll span {position:absolute; top:50%; left:50%; margin-left:-10px; margin-top:-17px; height:0; width:0; border:10px solid transparent; border-bottom-color:#fff}
#scroll:hover {background-color:#A80000; opacity:1}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

<body>
<p>Role a página para baixo...</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<a href='#' id='scroll' title='Voltar ao Topo'>Topo<span/></a>
</body>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .