Floating back-to-top button in Markdown documents

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.

7 Likes

Very nice. I’m sure this will be useful to some who
Use DEVONthink for long-form writing.

1 Like

Hello

This is a very useful part in my MD-files, thank you very much for this fine work.

1 Like

Thank you for sharing this!

PS: I have also created a testfile, to compare markdown editors and previewers, style files etc. It can be found here: https://github.com/OlafWolkenhauer/Markdown

1 Like

This is very cool. Thanks for posting, @PixelTracker

Nice design and finish - very Jony Ive. :clap:

1 Like

Just read the blog post on DT blog today - amazing series of scripts ! Thanks you

1 Like