29
13

More than 3 years have passed since last update.

Chrome80からデフォルトでURLのフラグメントでテキストを指定してスクロールできるようになったので試してみた

Last updated at Posted at 2020-02-23

初心者です。間違いなどありましたら教えていただけるとありがたいです。

参考

urlで何かしらテキストを指定して、ページの特定の部分にリンクできます。
ブラウザはテキストを強調表示し、スクロールして表示してくれる機能です。


Scroll To Text Fragment

例えば「 https://ja.wikipedia.org/wiki/ネコ#:~:text=ネコ科動物を指す 」にリンクすると指定の場所までスクロールしてくれるのを確認できました

apFYpVND0o.gif


今までもhtmlのid属性に対して、「 https://ja.wikipedia.org/wiki/ネコ#体格 」 などとフラグメント付きでリンクしてもその場所までスクロースしてくれたのですが、
これだとhtmlが<div id="体格">となっている場所にしかできなかったので、本当にリンクしたい部分と若干ずれていたり、id属性がないとそもそもページ内を指定してリンクすることができなかったので、個人的にこの機能は便利だと思いました。:grinning:

構文

:~:text=[prefix-,]textStart[,textEnd][,-suffix]

textStartのみが必須で、残りはオプショナルです

  • textStart のみを指定した場合はその文字と一致する場所にスクロールしてくれるようでした

  • textEndも指定すると、textStarttextEndの範囲で参照できます

指定テキストが長い場合はこちらの方が良さそうです

Screen Shot 2020-02-24 at 0.40.56.png


  • prefix--suffix を指定すると指定の文字がページ内に複数ある場合に絞り込める

prefix--suffix無しの場合

ページ内の一番最初の「リビアヤマネコ」にスクロールしてくれる

Screen Shot 2020-02-24 at 1.11.25.png

prefix-ありの場合

「亜種」という文字の次の「リビアヤマネコ」にスクロールしてくれる

Screen Shot 2020-02-24 at 1.14.18.png

-suffixありの場合

「の生息」という文字の前の「リビアヤマネコ」にスクロールしてくれる

Screen Shot 2020-02-24 at 1.18.18.png

以上です。見ていただいてありがとうございました。:bow:

29
13
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
29
13