Optimize for happiness

Life is easier with simple scripting. Grateful for everyone's encouragement and support!

View this project on GitHub

Link to the very top of page on a GitHub page

2023.06.27   •   last modified 2023.06.28   •   2 min read

There is no default way to point (anchor) to the very top of a blog post or a page in Markdown. But we can combine two ideas to accomplish this.

The convenience of markdown is that once we start writing an article and title subsections, they become automatically linkable / anchored from anywhere else. So if I want to say (see section above), I type:

see [section above](#name-of-section-above)

There are certain rules about what we type inside those parentheses that is a link ID:

  • start with a # - only one! Regardless of which level section you are pointing to. For example, if that section above is ###### I would still type only one hashtag when linking to it.
  • type every word of the title in lowercase letters.
  • spaces in the actual title become dashes in the link ID.

As GitHub pages are built, these links are automagically assigned into html links. So we can keep referring back and forth to any section of the blog page.

Typically, I assign a title to a post or page in the front matter of the document (that is all the information we put at the very top in between lines of three dashes ---). That particular heading does not get assigned a linkable ID, so we cannot just type:

[Back to top](#title-of-page)

… and expect to jump right back to the top. For that, I had to manually assign an ID to something at the top of every page.

I edited the basic layout that contains the header of the website which is applied globally. To a top section there, I added inside an element

id="top-of-page"

For example, <body id="top-of-page"> or whatever you choose.

Now, I can type a line

[Back to top](#top-of-page)

and that link will always jump to the very start of the page. Which is sometimes preferable than having a link to some top section like the Table of contents, if there is some introductory text above it and you want an option to let readers just go to top and see everything on your page again.

Resources

Say Hi!