[Feature proposal]: back-to-top button, for HTML output

[aborruso]

Hi,
a lot of time we have great quarto sites, with very long pages.

In these cases I am missing a back-to-top button, as the one we have in Material for MkDocs.

if anyone from the core dev group finds it interesting, this is a feature proposal.

Thank you

[mcanouil]

You might want to check out a funny extension: https://github.com/mcanouil/quarto-elevator

You can easily add an hyperlinks to the first section of your post.
I personally would like to not have this button everywhere, especially when there is the fixed TOC because it's hiding actual contents when any scrolling up is performed.

Also the thing you show seems to be a simple JavaScript script.
So this can easily be embedded.

[mcanouil]

Thanks for pointing this out. 😉

I am curious, so I'll take a look at this and possibly make an extension just to try it out.

[mcanouil]

Ok, this is pretty simple, so should not be a problem to include this into Quarto if Quarto team feels like it.
Here is a demo:

• Quarto document

  ---
  title: top
  format:
    html:
      include-in-header: back-to-top.html
      theme: minty
  ---
  
  :::{style='text-align: center;'}
  
  ```{=html}
  <style>
  .down-arrow {
    font-size: 120px;
    margin-top: 120px;
    margin-bottom: 120px;
    text-shadow: 0px -20px #0C1F31, 0px 0px #C33329;
    color: rgba(0,0,0,0);
    -webkit-transform: scaleY(0.8);
    -moz-transform: scaleY(0.8);
    transform: scaleY(0.8);
  }
  </style>
  ```
  
  <div class="down-arrow">&#9660;</div>
  First we need to get to the bottom of the page.
  <div class="down-arrow">&#9660;</div>
  Because you're already at the top.
  <div class="down-arrow">&#9660;</div>
  So a "back to top" button wouldn't make sense.
  <div class="down-arrow">&#9660;</div>
  Down down down.
  <div class="down-arrow">&#9660;</div>
  ## Wow, all this scrolling
  <div class="down-arrow">&#9660;</div>
  This had better be worth it.
  <div class="down-arrow">&#9660;</div>
  It's going to take ages to get back to the top.
  <div class="down-arrow">&#9660;</div>
  If only we had an easy way to get back...
  <div class="down-arrow">&#9660;</div>
  ...that is both functional and fun.
  <div class="down-arrow">&#9660;</div>
  I call "back to top" buttons ...
  <div class="down-arrow">&#9660;</div>
  ...they should really behave more like them.
  <div class="down-arrow">&#9660;</div>
  Ok, here we are... click that arrow button!
  
  :::

• "back-to-top" CSS/JS/HTML

  <button type="button" class="btn btn-primary btn-lg bi bi-arrow-up" id="btn-back-to-top"></button>
  
  <style>
  #btn-back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none;
  }
  </style>
  
  <script>
  let backToTopButton = document.getElementById("btn-back-to-top");
  
  window.onscroll = function () {
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
      backToTopButton.style.display = "block";
    } else {
      backToTopButton.style.display = "none";
    }
  };
  
  backToTopButton.addEventListener("click", function () {
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
  });
  </script>

[aborruso]

You are very kind!!

I will try it

[mcanouil]

To make appear or disappear the button depending on whether or not the user is scrolling up or down needs a bit more code I think, i.e., getting current Y position and compare to previous.
Currently, this is a "sticky" button "back to top", it uses the primary colour of Bootswatch theme and use Boostrap icons which are both part of Quarto.

[mcanouil]

@dragonstyle @cscheid Pinging you guys for you to discuss if it's worth adding to the default page templates for v1.3 maybe (document and/or website), unless you already have something for this purpose I am not aware of.

[aborruso]

We officially have it https://quarto.org/docs/websites/website-navigation.html#back-to-top

[mcanouil]

I need to update my "elevator" extension to work out of the box with this.

https://github.com/mcanouil/quarto-elevator