Heading, anchor, and bookmarking
Sometimes I read online articles, and these articles are usually long pages and have outlines at the beginning. These outlines are the hyperlinks to the subtopics headings. Technically, you click the outline hyperlink, your browser will browse to the “anchor”, the URL will append with hash (#). Therefore, it is useful for bookmarking, so that you can share the URL target on the topic to someone else, or re-visit your bookmark.
Thus, I wrote a script as bookmarklet to solve this issue, so that I can click the headings when I am reading the article. You can create the bookmark with the following URL:
[code language=“javascript”] javascript:var elems=document.querySelectorAll(“h1[id],h2[id],h3[id],h4[id],h5[id],h6[id],h1>*[id],h2>*[id],h3>*[id],h4>*[id],h5>*[id],h6>*[id],a[name]:not([href])”);var array=Array.from(elems);array.forEach(function(elem){elem.style.cursor=“pointer”;elem.setAttribute(“title”,“anchor:"+(elem.id?elem.id:elem.name));elem.innerHTML+=” *";elem.addEventListener(“click”,function(el){location.hash=el.target.id?el.target.id:el.target.name})}); [/code]
(Yes, it starts with javascript: instead of http://. Sadly Wordpress.com doesn’t allow to create bookmarklet in the post. Moreover, I was actually using ⚓ instead of asterisk *, but Wordpress.com auto convert it to emoji, consequently cannot use it in the script above.)
You can try any Wikipedia page to test it. It also works on Stackoverflow, so that you can share the URL to a certain answer to others.