私はこの input
要素を持っています。
<input type="text" class="textfield" value="" id="subject" name="subject">
そして、他のテキスト入力やテキストエリアなど、いくつかの要素があります。
ユーザーが #subject
の付いた input
をクリックすると、ページはきれいなアニメーションで最後の要素までスクロールするはずです。上にスクロールするのではなく、下にスクロールするようにします。
ページの最後の要素は #submit
の submit
ボタンです。
<input type="submit" class="submit" id="submit" name="submit" value="Ok, Done.">
アニメーションは速すぎず、流動的であるべきです。
私は最新のjQueryバージョンを使用しています。プラグインをインストールせず、デフォルトのjQueryの機能を使って実現したいと思っています。
idがbutton
のボタンがあると仮定して、以下の例を試してみてください。
$("#button").click(function() {
$([document.documentElement, document.body]).animate({
scrollTop: $("#elementtoScrollToID").offset().top
}, 2000);
});
このコードは、Smoothly scroll to an element without a jQuery pluginという記事から入手しました。そして、以下の例でテストしました。
<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()を使用します。 表示 - デモ、API、ソース 。
ページやエレメントのスクロールをより簡単にするために、この軽量プラグインを書きました。対象となる要素や指定した値を渡すことができる柔軟性があります。おそらくこれはjQuery'の次の公式リリースの一部になるかもしれませんが、あなたはどう思いますか?
**使用例:***。
$('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
オプション:
scrollTarget:希望するスクロール位置を示す要素、文字列、または数値。
offsetTop:スクロールターゲットの上に追加のスペースを定義する数値です。
duration:アニメーションが実行される時間を指定する文字列または数値です。
easing: アニメーションの実行時間を指定します。トランジションに使用するイージング関数を示す文字列です。
complete:アニメーションが完了したときに呼び出される関数です。
このシンプルなスクリプトを使って
if($(window.location.hash).length > 0){
$('html, body').animate({ scrollTop: $(window.location.hash).offset().top}, 1000);
}
urlにハッシュタグが見つかった場合、scrollToがIDに合わせてアニメーションするようにします。ハッシュタグが見つからない場合は、スクリプトを無視します。