☰

Chrome でスクロールした後、名前付きアンカーに戻るにはどうすればよいですか?

tag-icon • tag-icon google-chrome html url
Chrome でスクロールした後、名前付きアンカーに戻るにはどうすればよいですか?

名前付きアンカー（これです) をクリックすると、Chrome はアンカーを含むページの部分に直接移動します。ここまでは順調です。

しかし、少しスクロールすると、アンカーがどこにあったか分からなくなる場合があります。名前の付いたアンカーに戻るにはどうすればよいでしょうか?

ページを更新してみましたが、Chrome ではアンカーに戻りません。強制更新 (Ctrl + F5) も試しましたが、効果はありませんでした。また、Ctrl + L (アドレス バーを選択するため) を押してから ENTER を押してページを再読み込みすることも試しました。

私の回避策は、タブを閉じて、完全な URL で新しいタブを再度開くことです。これは、仕様ドキュメントをたくさん読む人にとっては非常に面倒です。もっと良い方法はないでしょうか?

答え1

要素をビューの上部までスクロールするには、JavaScript を実行するだけです。

document.getElementById(location.hash.slice(1)).scrollIntoView()

ソース：javascript - 指定されたアンカーまで HTML ページをスクロールするにはどうすればいいですか? - Stack Overflow

便宜上、これをブックマークバーにブックマークとして追加したり、キーボードショートカットを定義する。

javascript:document.getElementById(location.hash.slice(1)).scrollIntoView()

URLにハッシュがない場合、（サイレントな）JavaScriptエラーが発生します。代わりにページの先頭までスクロールするには、

(document.getElementById(location.hash.slice(1))||document.body).scrollIntoView()

答え2

このブックマークレットを使用してください:

javascript: var h = location.hash ; location.hash = "" ; location.hash = h ; null

説明：

  • 設定するとlocation.hash、ページがそのアンカーまでスクロールされます。
  • 特別なケースとしてlocation.hash、自体何も行われません。
  • それするスクロールするが、その他そしてすぐに元の値に戻ります。
  • null最後に、ブックマークレットの最終値には/ が必要ですundefined。そうでない場合、(歴史的な理由により) ページ本文が最終値に置き換えられます。

[以下は「追加クレジット」のみです]

あるいは、user202729さんの回答に似た方法もあります。彼の回答は で形成されたアンカーでのみ機能します<a id="foo">。 を使用するアンカー、例えばSU/SO/SEで使用されているアンカーでは機能<a name="foo">しません。これらをキャッチするには（おそらく誤検知があります。私はこのアプローチをあまり検討しませんでしたが）、

javascript: var h = location.hash.slice(1) ; (document.getElementById(h) || document.getElementsByName(h)[0] || document.body).scrollIntoView()

ただし、このアプローチも、 を使用する github.com などのサイトでは失敗します<a class="anchor" href="#foo">。私の知る限り、このアプローチは非標準であり、カスタム JavaScript が必要です。上記の私の最初のアプローチは、3 つのアンカー スタイルすべてで機能します。

追伸：SEから生まれるアイデアのコラボレーションが大好きです。user202729さんの回答とDean Hardingさんの回答を読んで指定されたアンカーまで HTML ページをスクロールするにはどうすればよいでしょうか?実験して答えを見つけるために必要なアイデアを与えてくれました。

答え3

@Noach によるソリューションを補足するために、ブックマークレットの作成方法に関する情報を追加したいと思います。ブックマークレットは、Web ページを開く代わりに JavaScript を実行するブラウザーのブックマークです。

残念ながら、構文の制限により、superuser.com でブックマークレット リンクを作成することはできません。そのため、手動で追加する必要があります。

Chromium でブックマークレットを追加するには、ブックマーク バーを右クリックして、[ページを追加...] をクリックします。
または、ブックマーク マネージャーに移動して右クリックし、[新しいブックマークを追加] をクリックします。

「名前」フィールドに貼り付けますre-anchor。このテキストはブックマークバーに表示されます。
「URL」フィールドに貼り付けます。javascript: var h = location.hash ; location.hash = "" ; location.hash = h ; null

ここに画像の説明を入力してください

次に、新しく作成したブックマークレットをバーのどこかに配置して、必要なときにクリックできるようにします。

関連情報