jQuery görgetés az elemhez
Van ez az "input" elem:
<input type="text" class="textfield" value="" id="subject" name="subject">Aztán van néhány más elemem is, mint például más szöveges beviteli elemek, textarea, stb.
Amikor a felhasználó rákattint a #subject-vel ellátott #input-ra, az oldalnak egy szép animációval az oldal utolsó eleméig kell görgetnie. A görgetésnek alulra és nem felülre kell gördülnie.
Az oldal utolsó eleme egy #submit gomb a #submit-vel:
<input type="submit" class="submit" id="submit" name="submit" value="Ok, Done.">Az animációnak nem szabad túl gyorsnak és folyékonynak kell lennie.
A legújabb jQuery verziót futtatom. Inkább nem telepítek semmilyen plugint, hanem az alapértelmezett jQuery funkciókat használom ennek eléréséhez.
Feltételezve, hogy van egy gombod a gomb azonosítóval, próbáld ki ezt a példát:
$("#button").click(function() {
$([document.documentElement, document.body]).animate({
scrollTop: $("#elementtoScrollToID").offset().top
}, 2000);
});A kódot a Zökkenőmentes görgetés egy elemre jQuery plugin nélkül című cikkből vettem. És az alábbi példán teszteltem.
<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(): View - Demo, API, Source
Azért írtam ezt a könnyed plugint, hogy az oldal/elem görgetését sokkal egyszerűbbé tegyem. Ez'rugalmas, ahol átadhat egy célelemet vagy megadott értéket. Talán ez része lehet a jQuery's következő hivatalos kiadásának, mit gondolsz?
Példák használatára:
$('body').scrollTo('#target'); // Scroll screen to target element
$('body').scrollTo(500); // Scroll screen 500 pixels down
$('#scrollable').scrollTo(100); // Scroll individual element 100 pixels downOptions:
scrollTarget: A kívánt görgetési pozíciót jelző elem, karakterlánc vagy szám.
offsetTop: Egy szám, amely a görgetési célpont feletti további távolságot határozza meg.
duration: Az animáció futási idejét meghatározó karakterlánc vagy szám.
easing: Egy karakterlánc, amely azt jelzi, hogy az átmenethez milyen lazítási függvényt használjon.
complete: Az animáció befejezése után meghívandó függvény.
Ezzel az egyszerű szkripttel
if($(window.location.hash).length > 0){
$('html, body').animate({ scrollTop: $(window.location.hash).offset().top}, 1000);
}Megtenné, hogy ha egy hash tag található az url-ben, a scrollTo animálja az ID-t. Ha nem talál hash taget, akkor figyelmen kívül hagyja a szkriptet.
