jQuery スクロール操作解説
2024-09-30
jQueryでページまたはiframeをスクロールする
jQueryを使ってページまたはiframeをスクロールする方法は、主に2つあります。
ページをスクロールする
$(document).scrollTop($(document).height());
- (document).scrollTop((document).height()): ページのスクロール位置を、ページの高さに設定することで、一番下にスクロールします。
- (document).scrollTop()∗∗:ページの現在のスクロール位置を取得します。∗∗∗(document).height(): ページの全体の高さを取得します。
iframeをスクロールする
$('#myIframe').contents().find('body').scrollTop(0);
- .scrollTop(0): iframe内のbody要素を、一番上にスクロールします。
- .find('body'): iframe内のbody要素を取得します。
- $('#myIframe').contents(): iframeのコンテンツを取得します。
例
<iframe id="myIframe" src="iframe.html"></iframe>
<script>
$(document).ready(function() {
// ページをスクロールする
$('#scrollToBottom').click(function() {
$(document).scrollTop($(document).height());
});
// iframeをスクロールする
$('#scrollToTopIframe').click(function() {
$('#myIframe').contents().find('body').scrollTop(0);
});
});
</script>
jQuery スクロール操作解説
$(document).scrollTop($(document).height());
$('#myIframe').contents().find('body').scrollTop(0);
<iframe id="myIframe" src="iframe.html"></iframe>
<script>
$(document).ready(function() {
// ページをスクロールする
$('#scrollToBottom').click(function() {
$(document).scrollTop($(document).height());
});
// iframeをスクロールする
$('#scrollToTopIframe').click(function() {
$('#myIframe').contents().find('body').scrollTop(0);
});
});
</script>
解説
- (document).ready()∗∗:ページが読み込まれた後に実行される関数を定義します。2.∗∗('#scrollToBottom').click(): 「scrollToBottom」というIDを持つボタンがクリックされたときに実行される関数を定義します。
- $('#myIframe').contents().find('body').scrollTop(0): iframe内のbody要素を一番上にスクロールします。
アニメーション効果を追加する
$('html, body').animate({ scrollTop: $(document).height() }, 800);
- 800: アニメーションの時間をミリ秒で指定します。
- scrollTop: スクロール位置を指定します。
- .animate(): 指定したプロパティをアニメーションで変更します。
スクロールイベントを使用する
$(window).scroll(function() {
if ($(this).scrollTop() + $(this).height() >= $(document).height()) {
// スクロールが最下部に達したときの処理
}
});
- (window).scroll()∗∗:ウィンドウがスクロールされたときに実行される関数を定義します。∗∗∗(this).scrollTop() + $(this).height() >= $(document).height(): スクロールが最下部に達したかどうかを判定します。
スムーズスクロールを実装する
$('a[href^="#"]').on('click', function(e) {
e.preventDefault();
var target = this.hash;
var $target = $(target);
$('html, body').animate({ scrollTop: $target.offset().to p }, 1000);
});
- $('a[href^="#"]').on('click', function(e))**: アンカーリンクをクリックしたときに実行される関数を定義します。 * **e.preventDefault()**: デフォルトのリンク動作をキャンセルします。 * **var target = this.hash;**: アンカーリンクのターゲットを取得します。 * **$('html, body').animate({ scrollTop: $target.offset().top }, 1000): ターゲット要素までスムーズにスクロールします。
jquery scroll scrollto
