Eu tenho este elemento de "entrada":
<input type="text" class="textfield" value="" id="subject" name="subject">
Depois tenho alguns outros elementos, como outras entradas de texto, áreas de texto, etc.
Quando o usuário clica naquele input
com #subject
, a página deve rolar para o último elemento da página com uma bela animação. Deve ser um rolo de rolagem para baixo e não para cima.
O último item da página é um botão submit
com #submit
:
<input type="submit" class="submit" id="submit" name="submit" value="Ok, Done.">
A animação não deve ser muito rápida e deve ser fluida.
Estou a correr a última versão do jQuery. Eu prefiro não instalar nenhum plugin, mas usar as funcionalidades padrão do jQuery para conseguir isso.
Assumindo que você tem um botão com o 'botão de identificação', tente este exemplo:
$("#button").click(function() {
$([document.documentElement, document.body]).animate({
scrollTop: $("#elementtoScrollToID").offset().top
}, 2000);
});
Obtive o código do artigo Rolar suavemente para um elemento sem um plugin jQuery. E eu o testei no exemplo abaixo.
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>
$(document).ready(function (){
$("#click").click(function (){
$('html, body').animate({
scrollTop: $("#div1").offset().top
}, 2000);
});
});
</script>
<div id="div1" style="height: 1000px; width 100px">
Test
</div>
<br/>
<div id="div2" style="height: 1000px; width 100px">
Test 2
</div>
<button id="click">Click me</button>
</html>
jQuery .scrollTo(): Ver - Demonstração, API, Fonte
Eu escrevi este plugin leve para tornar a rolagem de página/elemento muito mais fácil. É flexível onde você poderia passar em um elemento alvo ou valor especificado. Talvez isto possa ser parte do próximo lançamento oficial da jQuery, o que você acha?
Exemplos de utilização:
$('body').scrollTo('#target'); // Scroll screen to target element
$('body').scrollTo(500); // Scroll screen 500 pixels down
$('#scrollable').scrollTo(100); // Scroll individual element 100 pixels down
Opções:
scrollTarget: Um elemento, cadeia ou número que indica a posição de rolagem desejada.
offsetTop: Um número que define o espaçamento adicional acima do alvo de deslocamento.
duração: Um fio ou número que determina quanto tempo a animação vai durar.
acilitante: Uma string indicando qual a função de facilitação a usar para a transição.
completo: Uma função para chamar assim que a animação estiver completa.
Usando este script simples
if($(window.location.hash).length > 0){
$('html, body').animate({ scrollTop: $(window.location.hash).offset().top}, 1000);
}
Faria no tipo que se uma tag hash for encontrada na url, o pergaminhoA animar para o ID. Se não for encontrada uma tag hash, então ignore o script.