File: thumbspage/template-floatingtop.html

<!--=======================================================================
HTML+styles+JavaScript for optional index-page floating Top button [2.0]. 
All uppercase formatting targets are replaced with configs by Python script.
Inline code, to avoid imposing extra requirements for custom HEADER.html 
files (though browsers allow <style> blocks in <body>, as does HTML 5.2+).  
Top goes to page top only: use custom headers or edit this for other targets. 
===========================================================================-->

<!-- Clients using a custom FOOTER.html may also need something like this:
.finalelement {               /* add extra space above Top's bottom at end of page */
    margin-bottom: 80px;      /* else, text at end may be overlayed and unviewable */
}
<P class=finalelement>        <==on the last content line or item (or <div>+padding, <br>)
-->

</P>
<button onclick="topClick();" 
        id="topBtn" 
        title="Go to index"
        style="
    display: none;                   /* initially HIDDEN (changed on scroll iff JS) */
    position: fixed;                 /* float/persist */
    bottom: %(SPACE_BELOW)dpx;       /* e.g., above site toolbar */
    right: 8px;                      /* left of scroll area */
    z-index: 99;                     /* covering priority */
    font-size: 15px;
    border: none;
    outline: none;
    cursor: pointer;                 /* change on mouse-over */
    padding: 10px;
    border-radius: 4px;              /* rounded corners */
    color: %(FG_COLOR)s;             /* foreground (text) color, default=white */
    background-color: %(BG_COLOR)s;  /* background color, default=grey */ 
">Top</button>

<!-- Set up click/scroll callbacks iff JS is enabled -->
<script>

// Get and save the button in global (window) scope
var topButton = document.getElementById("topBtn");    // i.e., "Top" above

// Set the default scroll constant: global so pages can change if needed
var topButtonShowAt = %(APPEAR_AT)d;    // px from top, show Top below this cutoff

function topClick() {
    //
    // Go to the top of page (but keep prior location in history for back).
    // Clear hover shading (else recessed color gets stuck on mobile)?
    // No: unhover doesn't work as tried for main site - punt on shading. 
    //
    window.location.href = '#';                    // go/scroll to top (no tag)
    //topButton.style.backgroundColor = '#999';    // no: unhover for mobile?
}

function scrollFunction() {
    //
    // Adapted from web examples; the odd || test is for browser interoperability:
    // see, for instance, https://dev.opera.com/articles/fixing-the-scrolltop-bug/.
    //
    // Clients can reset global topButtonShowAt for larger preambles; else Top 
    // may appear above/before an actual #top tag if it's not top of page #.     
    //
    var showat = topButtonShowAt;  // local
    // N pixels from the top after scroll?
    if (document.body.scrollTop > showat || document.documentElement.scrollTop > showat) {
        topButton.style.display = "block";   // show Top
    } else {
        topButton.style.display = "none";    // hide Top
    }
}

// Show/hide button whenever user scrolls below/above N px from top
window.onscroll = scrollFunction;   // source had "function() {scrollFunction()};"; why?
</script>