[解決済み] アンカーリンクをリンク先より数ピクセル上に移動させる
2022-05-31 02:31:54
質問
この質問をする/検索するのに最適な方法がわかりません。
アンカーリンクをクリックすると、リンク先のページがページの一番上に表示され、そのセクションに移動します。アンカー リンクでページのその部分に移動できるようにしたいのですが、一番上にスペースが欲しいのです。例えば、私はそれが非常にトップにあるリンク先の部分に私を送ることを望んでいない、私はそこに100または約ピクセルのスペースが必要です。
これは意味があるのでしょうか?これは可能ですか?
コードを表示するために編集されました - これは単なるアンカータグです。
<a href="#anchor">Click me!</a>
<p id="anchor">I should be 100px below where I currently am!</p>
どのように解決するのですか?
window.addEventListener("hashchange", function () {
window.scrollTo(window.scrollX, window.scrollY - 100);
});
これにより、ブラウザがアンカーにジャンプする作業を代わりに行い、その位置をオフセットに使用することができるようになります。
EDIT 1:
erb さんのご指摘の通り、ハッシュが変更されている間、ページ上にいる場合のみ動作します。ページに入るときに
#something
でページに入ると、上記のコードでは動作しません。それを処理するための別バージョンがこちらです。
// The function actually applying the offset
function offsetAnchor() {
if(location.hash.length !== 0) {
window.scrollTo(window.scrollX, window.scrollY - 100);
}
}
// This will capture hash changes while on the page
window.addEventListener("hashchange", offsetAnchor);
// This is here so that when you enter the page with a hash,
// it can provide the offset in that case too. Having a timeout
// seems necessary to allow the browser to jump to the anchor first.
window.setTimeout(offsetAnchor, 1); // The delay of 1 is arbitrary and may not always work right (although it did in my testing).
注
jQuery を使用するには、単に
window.addEventListener
を
$(window).on
に変更しました。ありがとう@Neon。
EDIT 2です。
ご指摘の通り、同じアンカーリンクを2回以上連続してクリックすると上記は失敗します。
hashchange
イベントがないためです。
この解決策は@Maveからの提案の非常に小さな修正版であり、単純化のためにjQueryセレクタを使用します。
// The function actually applying the offset
function offsetAnchor() {
if (location.hash.length !== 0) {
window.scrollTo(window.scrollX, window.scrollY - 100);
}
}
// Captures click events of all <a> elements with href starting with #
$(document).on('click', 'a[href^="#"]', function(event) {
// Click events are captured before hashchanges. Timeout
// causes offsetAnchor to be called after the page jump.
window.setTimeout(function() {
offsetAnchor();
}, 0);
});
// Set the offset when entering page with hash present in the url
window.setTimeout(offsetAnchor, 0);
この例のJSFiddleは ここで
関連
-
fetch ネットワークリクエストラッパーの説明例
-
vueにおけるv-forループオブジェクトのプロパティ
-
[解決済み】React Nativeアプリをターミナルから実行するとエラーが発生する(iOS)
-
[解決済み】React Uncaught Error: 対象コンテナが DOM 要素でない [重複]。
-
JavaScriptのgetElementById、getElementsByTagNam、getElementsByClassNameの違いと使い方
-
[解決済み] jQueryを使用してアンカーにページを上下にスクロールする方法は?
-
[解決済み] JSONPとは何か、なぜ作られたのか?
-
[解決済み] アンカーリンクをクリックしたときのスクロールを滑らかにする
-
[解決済み] 携帯電話でWebページ内のリンクをクリックすると電話がかかってくるようにするには
-
[解決済み] JavaScriptを起動するリンクがクリックされたときに、Webページが一番上にスクロールしないようにするにはどうしたらよいですか?
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
fetch ネットワークリクエストラッパーの説明例
-
Vueはランニングライト形式のテキストを水平方向にスクロールする機能を実装している
-
Vue+ElementUIによる大規模なフォームの処理例
-
[解決済み] テスト
-
[解決済み】awaitは非同期関数でのみ有効です。
-
[解決済み】gulp anythingを実行するたびに、アサーションエラーが発生します。- タスク関数を指定する必要があります
-
[解決済み】(Google Map API) Geocodeは以下の理由で成功しませんでした。REQUEST_DENIED
-
[解決済み】<select>で現在選択されている<option>をJavaScriptで取得するにはどうすればよいですか?
-
[解決済み] HTMLアンカーは'name'と'id'のどちらで作成するのが良いですか?
-
[解決済み] ページヘッダーがページ内アンカーに重なるのを修正しました。