You can now link to headers in your posts! This happens automatically when you create a header. It will create an anchor link based on the text of your header. For example, if you have a header like "Implementation", you can visit https://dev.to/andy/andys-post#implementation to jump straight to the "Implementation" section of the post.
Here's a more straightforward example:
Click to jump to the bottom of the page
How to use
[Jump to "How to use"](#how-to-use)
Jump above to the "How to use" header
When using multiword headers, the anchor link will convert spaces to dashes.
How to link to a header from a different post
You might want to link to a specific section of a different post. Well, you can do that, too:
[External post header jump example](https://dev.to/rhymes/changelog-export-posts-1kdm#how-do-i-do-that?)
External post header jump example
If you'd like this functionality for your previous posts, you'll need to resave the post itself.
Thanks @glebec and @bennypowers for getting the PR rolling!
Bottom
My header is called "Bottom", so visiting #bottom will move you to this section of the content.
Jump back to "How to use" section
Top comments (10)
Low-key heroism by Andy upon the idea of mentioning in this post that there is a small issue with some browsers.
Instead of make mention and deal with this later, he just makes the fix and ships the post.
Speaking of things along those lines that may have slipped through: I think the Ajax-loaded internal browsing may be breaking the link-to-other-post functionality. Will check more tomorrow.
Important thing is that the underlying markdown/html is sound and will be sturdy going forward. 😊
Thanks @glebec for starting the PR and @bennypowers for helping out!
This is nice, but these named anchors don't work from one page to another within dev.to, at least in Chrome. For example, if I link to a section of my post (using
https://dev.to/nestjs/integrate-nestjs-with-external-services-using-microservice-transporters-part-1-p3#broker-message-protocol), the page is always scrolled to the top. Interestingly, if I open the link in a new tab (right mouse click -> open in new tab) it works fine.Also, this would be so much better if the page rendered with visible icons indicating the bookmarkable content corresponding to named anchors. This would make it a lot easier to share a deep link to a section.
Aww yeah.
Great work @devteam!Ooops! I see it was @glebec and @bennypowers and some dev team assitance via @andy . Great work! Always nice seeing the community contributing to the dev.to codebase.GIFs aside, this is going to be super useful!
I stopped trying to make like a table of content on some of my longer posts because we didn't have this functionality, time to update 'em all :D
Nice!
Thank you guys.
Time to create those ToCs for people easily skim through what the post is going to be about.
👏👏👏👏👏👏👏👏