[解決済み] ページ上の特定の要素に移動するには?重複
2022-04-25 23:34:23
質問
HTMLページで、ページ上のある要素に「移動」/「スクロール」/「フォーカス」できるようにしたい。
通常であれば、アンカータグに
href="#something"
しかし、私はすでに、hashchange イベントと
BBQプラグイン
でこのページを読み込むことができます。
では、JavaScriptを使って、ページ上の指定された要素に移動させる方法は他にあるのでしょうか?
私がやろうとしていることの基本的なアウトラインは次のとおりです。
function focusOnElement(element_id) {
$('#div_' + element_id).goTo(); // need to 'go to' this element
}
<div id="div_element1">
yadda yadda
</div>
<div id="div_element2">
blah blah
</div>
<span onclick="focusOnElement('element1');">Click here to go to element 1</span>
<span onclick="focusOnElement('element2');">Click here to go to element 2</span>
解決方法は?
プラグイン形式の標準的な手法は、次のようなものです。
(function($) {
$.fn.goTo = function() {
$('html, body').animate({
scrollTop: $(this).offset().top + 'px'
}, 'fast');
return this; // for chaining...
}
})(jQuery);
では、次のようにすればいい。
$('#div_element2').goTo();
にスクロールします。
<div id="div_element2">
. オプションの処理と設定方法は、読者への課題として残されています。
関連
-
[解決済み】ある要素を別の要素に移動させるには?
-
[解決済み] 要素外でのクリックを検出するにはどうすればよいですか?
-
Uncaught TypeError: null のプロパティ 'offsetHeight' を読み取れませんでした。
-
[解決済み] 配列から特定の項目を削除するにはどうすればよいですか?
-
[解決済み] jQueryで要素が非表示になっているかどうかを確認するには?
-
[解決済み] JavaScriptで文字列が部分文字列を含むかどうかを確認する方法は?
-
[解決済み] 要素を水平方向にセンタリングする方法
-
[解決済み] 配列に特定のインデックスで項目を挿入する方法 (JavaScript)
-
[解決済み】別のウェブページにリダイレクトするにはどうすればいいですか?
-
[解決済み】jQueryでチェックボックスがチェックされているかどうかを確認するにはどうすればよいですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
WeChatアプレット用ユニアプリによるグローバルシェアリング
-
vueにおけるv-forループオブジェクトのプロパティ
-
[解決済み】React - uncaught TypeError: 未定義のプロパティ 'setState' を読み取れない
-
[解決済み] Error : 未定義のプロパティ 'map' を読み取ることができません。
-
[解決済み】awaitは非同期関数でのみ有効です。
-
[解決済み】(Google Map API) Geocodeは以下の理由で成功しませんでした。REQUEST_DENIED
-
[解決済み】リクエストに失敗していないのに、「TypeError: failed to fetch」が表示される。
-
[解決済み】エラー。Ionic使用中にモジュール '../lib/utils/unsupported.js' が見つかりませんでした。
-
JavaScriptのgetElementById()メソッド入門
-
[解決済み】JavaScriptで要素にスクロールする方法は?