File: thumbspage/template-floatingtop.html
<!-- HTML+styles+JavaScript for optional index floating Top button [2.0]. --> <!-- Formatting targets are replaced with user configs by Py build script. --> <!-- All inline, to avoid 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. --> <!-- 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>