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

1. Demo of In-page Links
   ⒈ Click Me for a Demo of an Anchor Link
   ⒉ Limitation: Will Not Work in Mobile Apps
2. How to Make One?
3. 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).

Figure 1. Right-click on the place you want to link to, select something like “Inspect” on the menu, find 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 a name="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).

Figure 2. Select the text you want to create the link on, then use # + 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).

Figure 3. Clicking the link will take the reader to the linked target.

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.

Figure 4. Random cat photo by Erik-Jan Leusink on Unsplash.

Nice. I hope you enjoy this tip!

1. ˄ This is a footnote. Click on “˄”s to go back to where you may have come from.
2. ˄ Using this method to create footnotes is also mentioned in this article.
3. ˄ Photo by Erik-Jan Leusink on Unsplash.