Medium ProTip: Using In-page Links in Articles
Good for TOC or footnotes. Defect: it’s website-only.
Using links within an article (a.k.a. anchor links), you can create something like Table of Contents or footnotes ¹ for your article:
Table of Contents
- Demo of In-page Links
⒈ Click Me for a Demo of an Anchor Link
⒉ Limitation: Will Not Work in Mobile Apps - How to Make One?
- This is Another Demo
Demo of In-page Links
If you click on one of the titles in Table of Contents, the page will automatically scroll to the corresponding section. In addition to Table of Contents, you can also create footnotes ².
Click Me for a Demo of an Anchor Link
Do not click on the line above, it’s just a title. Click that one in Table of Contents, you can click here to go to Table of Contents.
Limitation: Will Not Work in Mobile Apps
The anchor links only work on webpages, and it doesn't work on the Medium mobile app (currently). The link effect and style will simply disappear in mobile apps (but they do support mobile browsers).
How to Make One?
It’s easy to create anchor links in your article. First, you’ll need a desktop computer running Chrome, FireFox or Safari. Go to the edit page of your article.
1.Right-click on the place you want to link to, then select something like “Inspect” on the menu (Fig. 1).
2.The browser will open an inspector that shows the source code of the webpage, and the corresponding code of the element you right-click on shall be selected by default. Find something like name="xxxx"
, double-click on it and copy that xxxx
part (Fig. 1).
name="xxxx"
on the source code of the element you want to link to, double-click on it and copy that xxxx
part.Note: Only titles, paragraphs and list items that will have
name="xxxx"
can be a linked target. If the element you select dosen’t have aname="xxxx"
, try find one on the parent layer, or on another element that is in front and not far from your desired target.
3.Select the text you want to create the link on, click the “link” button on the popup bobble, then enter #
+ pastexxxx
, xxxx
is that thing you just copied on step 2 (Fig. 2).
#
+ xxxx
as the link.4.It’s done! Now people can press that link and be automatically taken to the place you want them to be (Fig. 3).
This is Another Demo
Since this section just serves as another demo of the links, there’s nothing important here. But I think it will be good to have a picture of a cat ³ at the end of the article.
Nice. I hope you enjoy this tip!
- ˄ This is a footnote. Click on “˄”s to go back to where you may have come from.
- ˄ Using this method to create footnotes is also mentioned in this article.
- ˄ Photo by Erik-Jan Leusink on Unsplash.