How to use this bookmarklet:
- Install the bookmarklet in your browser (e.g. by dragging the "Show Anchors" link from above into your browser's bookmarks).
- Navigate to a page which has anchors (e.g. a Wikipedia article that contains a table of contents).
- Invoke the bookmarklet by clicking the bookmark you added from step 1.
You will now see a lot of anchor icons located near the anchors on the webpage you are viewing.
- Do one of the following to copy a link to an anchor's location:
- Click on one to navigate to that location, and then copy the location from the address bar.
- Right-click on an icon and copy its location.
One thing that really annoys me on the internet is when you get to some really big page and find something useful in the middle of the page. You want to link to it, but you can't. If you are lucky, the site owner implemented anchors which allow you to jump to a specific section of the page which does allow you to link to that section. However there are many times I come across webpages that don't have links to the different sections. Some examples are forum posts (mainly non-standard forum engines) and comments on blogs and sites such as YouTube. The annoying part is that in the source code, there are elements which allow you to link to that specific part of the page, it's just that the site owners didn't provide a means to access it easily. So instead of having to spend a minute or two every time (i.e. viewing the source code, finding the anchor to use, etc), I thought that a bookmarklet would be an excellent solution.
The first thing I did was try to look for any existing solution. The top 10 results in Google all weren't good. Many of them were outdated (read: don't work), didn't support linking to the ID attribute. On the W3 specification page for anchors you can see that it says that the ID attribute can be used as anchors:
Destination anchors in HTML documents may be specified either by the A element (naming it with the name attribute), or by any other element (naming with the id attribute).This makes many more anchor locations available on webpages... places that the site owner probably never intended to be linked to. In fact, I just used this very bookmarklet to find a nice place to link to in that document which takes you as close to the quoted text as possible. The only problem would be if they change the page thinking no one linked to those ID attributes, but that's a risk I'm willing to take.
So since none of the existing solutions worked, I decided to make my own. There were a few requirements:
- Images should be used to show where the links are. This makes it much easier to spot than text. Btw, the image should not be hosted on a website either.
- And finally, it should work exactly as the specification states, where all A tags with name attributes and all elements with ID attributes (except for hidden elements) are linkable.
To load JQuery, I used a modified version of the code here. The only difference is that I reduced the function and variable names to use up less characters. In case you want to make your own bookmarklet that uses JQuery, you can use this template:
Don't forget to use a site such as Bookmarklet Builder to compress the whitespace even further.
Now that I had JQuery loading correctly, and figuring out the code to write was simple. I just needed to get the image to use. I decided to use the anchor image from the famfamfam set of icons. In following the requirement to not have a hosted image, I used this Base64 converter and converted it to base64 so it is essentially embedded into the bookmarklet. Another benefit of not using a hosted image is that it loads really quickly when compared to a hosted solution.
I tested the bookmarklet on Safari (Mac) and Chrome (PC), so while I didn't test on all the 5 major browsers, it should work flawlessly on all of them because it is using JQuery.
The first line in the bookmarklet contains the version number, this way if I ever update it, you can know if you have the latest version or not. To install the bookmarklet, grab it from the top of this post. Most browsers let you drag and drop it onto your bookmarks. If you need more help installing it, search Google for how to install a bookmarklet in your browser.
I hope you find it as useful as I do!