web-dev-qa-db-ja.com

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

名前付きアンカー（ this one など）を使用してURLをロードすると、Chromeは、アンカーを含むページの部分に直接移動します。これまでのところ、非常に優れています。 。

しかし、少しスクロールすると、アンカーがどこにあったかわからなくなる可能性があります。名前付きアンカーに戻るにはどうすればよいですか？

ページを更新しようとしましたが、Chromeはアンカーに戻りません。強制更新（Ctrl-F5）を試しましたが、効果がありません。Ctrlも試しました。 -L（アドレスバーを選択するため）の後にENTERを押して、ページを再読み込みします。

私の回避策は、タブを閉じてから、完全なURLで新しいタブを再度開くことです。これは、スペックドキュメントをたくさん読む人にとっては非常に迷惑です。もっと良い方法はありますか？

google-chromehtmlurl
2
Duncan Jones

JavaScriptを実行するだけで、要素をページの上部にスクロールできます。

_document.getElementById(location.hash.slice(1)).scrollIntoView()
_

ソース： javascript-HTMLページを特定のアンカーにスクロールする方法？-スタックオーバーフロー

便宜上、ブックマークバーのブックマークとしてjavascript:document.getElementById(location.hash.slice(1)).scrollIntoView()を追加するか、 キーボードショートカットを定義 を追加することができます。

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

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

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

_javascript: var h = location.hash ; location.hash = "" ; location.hash = h ; null_

説明：

  • _location.hash_を設定すると、ページがそのアンカーまでスクロールします。
  • 特別な場合として、_location.hash_をitselfに設定することはできません。
  • スクロールしますが、他の何かに設定すると、すぐに元の値に戻ります。
  • 最後に、ブックマークレットの最終値はnull/undefinedであるか、（歴史的な理由から）ページ本文を最終値に置き換える必要があります。

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

または、user202729の回答に沿って何かを行うこともできます。彼の答えは、_<a id="foo">_によって形成されたアンカーでのみ機能します。 _<a name="foo">_を使用するアンカーでは機能しません。例：ここでSU/SO/SEで使用されているもの！私たちはそれらを捕まえることができます（おそらく誤検知で-私はこのアプローチをあまり探求しませんでした）

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

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

p.s. SEから生まれるアイデアのコラボレーションが大好きです。 user202729の回答とDeanHardingの回答を読んで HTMLページをスクロールしてアンカーを指定する方法は？ 実験して、回答にたどり着くために必要なアイデアを教えてくれました。

0
Noach