Imam ta element input
:
<input type="text" class="textfield" value="" id="subject" name="subject">
Potem imam še nekaj drugih elementov, kot so drugi besedilni vhodi, tekstovna polja itd.
Ko uporabnik klikne na ta vnosnik
z #subject
, se mora stran pomakniti do zadnjega elementa strani z lepo animacijo. Pomikati se mora do dna in ne do vrha.
Zadnji element na strani je gumb oddaj
z #submit
:
<input type="submit" class="submit" id="submit" name="submit" value="Ok, Done.">
Animacija ne sme biti prehitra in mora biti tekoča.
Uporabljam najnovejšo različico jQueryja. Raje ne nameščam nobenega vtičnika, temveč za dosego tega uporabljam privzete funkcije jQueryja.
Ob predpostavki, da imate gumb z id button
, poskusite s tem primerom:
$("#button").click(function() {
$([document.documentElement, document.body]).animate({
scrollTop: $("#elementtoScrollToID").offset().top
}, 2000);
});
Kodo sem dobil iz članka Gladko pomikanje do elementa brez vtičnika jQuery. Preizkusil sem jo na spodnjem primeru.
<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(): Pogled - predstavitev, API, vir
Napisal sem ta lahek vtičnik, da bi olajšal pomikanje strani/elementov. Je prilagodljiv, saj lahko posredujete ciljni element ali določeno vrednost. Morda bi bil lahko del naslednje uradne izdaje jQueryja, kaj menite?
Primeri uporabe:
$('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
Možnosti:
scrollTarget: Element, niz ali število, ki označuje želeni položaj pomikanja.
offsetTop: Vmesnik: število, ki določa dodaten razmik nad ciljem pomikanja.
duration: Vezaj ali število, ki določa, kako dolgo bo trajala animacija.
zmanjševanje: Navodilo, ki določa, katera funkcija olajšanja naj se uporabi za prehod.
complete: Funkcija, ki se pokliče, ko je animacija končana.
S tem preprostim skriptom
if($(window.location.hash).length > 0){
$('html, body').animate({ scrollTop: $(window.location.hash).offset().top}, 1000);
}
bi v vrsti, da če se v url najde oznaka hash, scrollTo animira na ID. Če hash tag ni bil najden, se skripta ne upošteva.