There needs to be an automagic way to update the address bar while scrolling. This way one can deep link to a specific part of a webpage without hassle. This is crucial for sharing content on mobile- and other ‘fatfinger’ devices.
This is the case: As you read an article on your iPhone or iPad you find a brilliant quote that you like to share with the world. So you click the “Tweet this”-button. But there is something wrong:
The address you shared starts all browsers at the top of the webpage in stead of straight to the quote! That’s awkward!
This problem has been solved quite a long time ago in the language of the web: HTML. They invented so called ‘Achors’. Anchors work like little pieces of bookmark-velcro. Just add a hash-sign (#) combined with the anchor-name to the address of the page and your browser will jump right to the relevant quote. That’s what we call ‘deep linking’. In the address bar of the browser you get URL’s like:
http://awesomekoalas.com/#food
Unfortunately these anchors are invisible to the human eye. As a web developer you can expose an anchor list by adding a table of contents in the document so people can jump right to the part of interest. This is however a lost art and rarely used in favor of a clean styled page (which I can relate to).
On mobile devices this adds to the trouble of scrollapaluza in long-form articles. Every link you click starts waaaay at the top of the article, in stead of the part of interest, which makes checking out that quote some where in the middle a chore and uninteresting, no matter of the content. When we scrolled to a part to a page and like that piece, we like to share that part of the page, with the anchor! When you hit that ‘Tweet’ button on the iPhone, it should include the anchor into the address, so your friends jump right to the brilliant quote. Easy! Right?
Wrong! This does not exist yet! Yeah, I know! And this is where you come in, dear web-developer..
So how do we solve this? Well, Javascript (the programming language of the web) can detect if and where a quote, title or paragraph-top (marked with an anchor) is on the screen.
So, we need a rule like: “if an anchor is near the top of screen, add the anchor name to the address”.
Check out the illustration here.
So, here is my plea: Please, JavaScript programmers of the world. Make this happen!
Aaaaand GO! Thanks!
Updates
This is só awesome! Within 2 hours (!!) of posting this post, we have three winners. Many kudos to these heros, each of them dared to improve the Internet at large and kicked ass at it! You guys rock!
I had three wonderful solutions posted to me, with two I can link to. All three get a mention, all three have chosen jQuery as prerequisite. Some choose to walk all elements containing an anchor (from HTML5 on it’s implemented with the id-attribute), some choose to walk the typical elements used as a topic head indicator (like h1, etc).
- Marc Worrell posted this solution (which I also applied on http://awesomekoalas.com) : https://github.com/zotonic/zotonic/blob/master/modules/mod_base/lib/js/modules/scrollpaluza.js
- Sybren Wartna (a colleague of Mirabeau) got creative and had just one (temporary) flaw: it flooded the browser history with items at every scroll: http://jsfiddle.net/whereswaldo/77wzz/30/
- Leendert Ullersma (also a colleague of Mirabeau) provided a similar solution as Sybren and corrected the code to my history-remark.
Done 🙂
https://github.com/zotonic/zotonic/blob/master/modules/mod_base/lib/js/modules/scrollpaluza.js