システム開発のアイロベックス

システム開発ブログ

≪トップページに戻る

指定の要素までスクロール

STAFF WANTED
松本(健)
HTML全般
eyecatch_160223.jpg

JavaScriptで文章内の特定の座標までスクロール位置を変更するにはscrollToメソッドを利用します。
ページ内の座標をピクセルで指定しスクロールさせたい場合には第一引数にX座標、第二引数にY座標を指定し下記のように記述します。

サンプル1

// ページ最上部から下方向へ300pxスクロール
window.scrollTo(0,300);


また、scrollToメソッドの引数に取得した要素の座標を指定することで特定の要素位置までスクロールさせることができます。

サンプル2

function scrollToElement() {
	// 要素の位置を取得
	var element = document.getElementById("hogehoge");
	var rect = element.getBoundingClientRect();
	var x = rect.left;
	var y = rect.top;
	// 取得した要素の位置を引数に指定
	window.scrollTo(x, y);
}


1ページ内に項目が複数ある時や、情報量が多い時に利用すると手動でスクロールする手間が省け、使いやすい画面作成に繋がるのではないでしょうか。
関連記事

chosenプラグインを使用しselectタグを使いやすくする

JavaScriptでアコーディオンメニュー

【HTML】a href="#" onClick の画面遷移について

FireFoxでソースチェック

【HTML/javascript】複数テーブルのスクロール

≪トップページに戻る

システム開発のアイロベックス。 アイロベックスは、創業23年を迎える、プロフェッショナル集団です。 システム開発のお悩みに対して、豊富な経験と実績でお応えいたします。

システムのトラブル解決を承ります。すぐにシステムリフォームを体験できますシステム診断・システムリフォームのお申し込みはこちらから。