In just two steps you can add a floating back-to-top button to your Markdown documents. You just have to apply a few CSS commands.
First, add the following style sheet commands to your Markdown CSS file:
/* Enable smooth scrolling */
@media screen and (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
}
/* Style the button */
.top-link {
transition: all .25s ease-in-out;
position: fixed;
bottom: 0;
right: 0;
display: inline-flex;
color: #000000;
cursor: pointer;
align-items: center;
justify-content: center;
margin: 0 2em 2em 0;
border-radius: 50%;
padding: .25em;
width: 1em;
height: 1em;
background-color: #F8F8F8;
}
The only thing you now have to do is add the following two lines to your Markdown documents:
<a class="top-link hide" href="#top">↑</a>
<a name="top"></a>
The position of the <a name="top"></a> tag defines the jump-to-position within your document. This is how my rendered Markdown file looks like:
The button is placed in the lower right corner and looks a bit subtle. I didn’t want it to be too prominent. However, you can quickly change its layout, e.g., by increasing the width and height or the background-color. You can find my full CSS file on GitHub as well.
To make the button also work in DTTG, just add the shown CSS commands to DTTG’s Markdown settings.
