Scroll to text bookmarklet

I forgot that Scroll to Text fragment was a thing that is launching soon in Chrome (81 and not 80 as mentioned in Chrome Status), until I saw this Tweet.

I love this feature, it let’s you link to more than just named elements. Domenic Denicola asked if there was an extension that did this. I don’t think you need one, because bookmarklets are awesome and underused. I decieded that it should be pretty quick to write up a simple bookmarklet that creates a link with a scroll to text anchor that you can share with people.

Here it is. It get’s the selected text, and creates a new URL and opens a window. I’ve noticted that ‘scroll to text’ can only scroll to whole words so I might need to add some logic that extends the selection so that it picks up partial words correctly.

const selectedText = getSelection().toString();
const newUrl = new URL(location);
newUrl.hash = `:~:text=${encodeURIComponent(selectedText)}`;
window.open(newUrl);

If you have Chrome 81 then you can drag this Find in page bookmarklet to your address bar and easily create links that link to content.

It’s not too hard to extend this, for example if you wanted to just paste on to the clipboard you could do that by replacing the window.open line.

Triff and Marv.

Picture of me smiling.

Paul Kinlan

Trying to make the web and developers better.

RSS Github Medium

Likes

Benny Schudel Alfredo Lopez Eric Lawrence 🎻 KΞNNΞTH C. ⚡ Jake ItzLevvie razh Guiga pwafire.org TimERTy José Cage Hannu Aarniala Varun A 🔥 Carl H Neil Kinnish Rahul Reddy Katpally Eric Lawrence 🎻 Weston Ruter (Ae) kukunayida 瀬野 陽平 Ahmad Saleem Manaia Junior ⚡️ Ivan Kozik Zander Omair Qadir Cem 💎 Mickael Isaert ♇4n3 💬 Adam Argyle sidasa Berrak 🏳️‍🌈 👩🏻‍💻 ☕️ 🥽 🌊 David Maximo Cozetti Muhammad Bilal  tregoning C/ #MissU4everCarrie Dion Almaer Jonathan Hammond Louis-Rémi Babé Alberto Medina Steve Lemke Adam Silverstein Kyle Pflug Seán O'Grady Cedric Poilly 🇲🇺 全部入りHTML太郎 Kenichi Suzuki 💫 鈴木謙一 Pedro Duarte Ismael J. Tisminetzky 🌎 Elijah Lynn 🌎 Russell Huq Valentin Goșu 🇷🇴 🤓 🦖 🦊 Gabriel Azevedo Michael Shin 🌊 Marja Hölttä Alexandru Andone Aaron Iker んじゃみ Brandon Surowiec #!/kiko/beats Denis TRUFFAUT ⭐️ Scott tren Experimental Web Roman Zhyliov Bruce Anderson 🦊 Luca Iaconelli 🐣 Eiji Hirayama LiamOSullivan Javad from JAVAD Joe Alden Nutti Saelor ⬢ Lógico Kai Kinuko Yasuda / 安田絹子 Thomas Wang Ricard Torres Prasanth Vaaheeswaran David Farrell Ivan Kutil KΞNNΞTH C. ⚡ Sayla Rakhy Awais Yusuke Utsunomiya

Reposts

Eric Lawrence 🎻 C/ #MissU4everCarrie Dion Almaer (((Richard Drake))) Alberto Medina Jake Archibald 全部入りHTML太郎 Daniel Abromeit 🌎 Elijah Lynn 🌎 Chrome Developers Nikolay Cholakov🙏4❤ Dimitri P. 🏝 Alexandru Andone Daniel 💭 🌹 🚀 ☭ Jorge Maiden Experimental Web Sushubh ⬢ Lógico KΞNNΞTH C.⚡

Comments and Replies

Paul KinlanPaul Kinlan
Terrific and Marvelous
Eric Lawrence 🎻Eric Lawrence 🎻
Thanks for sharing this! What's a Triff and Marv?
PointPoint
@Paul_Kinlan our extension (getpoint.co) does this in a really elegant way. We were recently removed from the chrome store for vague reasons, and are trying to understand why. Can you help? We've been in the chrome store since 2013 and have many loyal users
Paul KinlanPaul Kinlan
It's currently working unflagged in 81 for me.
Anton Juul-NaberAnton Juul-Naber
How do you know it's landing in v81? I'm told it's v82, Chrome Status is insisting on v80, and I think I'm going insane 🙃 github.com/Fyrd/caniuse/p… chromestatus.com/feature/473339…
Thomas SteinerThomas Steiner
Yeah. I have a couple of ideas how to build upon this (standing on the shoulders of giants, as always). Watch this space, I’ll toy around in the next couple of days.
Mr.doobMr.doob
Right click > Copy Text Fragment URL?
Bruce Lawson. European.Bruce Lawson. European.
Oh, and more seriously, please see Pattypoo's comment https://t.co/NtrlTnjDgq
Paul KinlanPaul Kinlan
Yeah, pretty much
Paul KinlanPaul Kinlan
There's a link to the spec in the post. Whether it's a standard depends on if there's agreement and implementations outside of Blink.
Bruce Lawson. European.Bruce Lawson. European.
Are "Triff and Marv" who signed the blogpost your PAs?
Louis-Rémi BabéLouis-Rémi Babé
Nice, will this be standardized?
Paul KinlanPaul Kinlan
They text is highlighted automatically, but if you want to select it you would have to do it yourself.
Sam VloeberghsSam Vloeberghs
Is selecting the text again, when visiting via the bookmark, a default functionality or do we need to handle that with JS?
MayhemMayhem
could also do `window.copy(newUrl)`