a button that scrolls to top and becomes visible when the user starts to scroll the page

[futurist]

Hi,

 

Just want to share this bit of JavaScript and CSS that creates a fixed "scroll to top" button on the corner of your DataPage and shows up only when the user starts to scroll the page. (I implemented this on my Tabular Report DataPage that has many records per page)

 

Header (CSS):

<style>

#myBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: red; /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 15px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
  font-size: 18px; /* Increase font size */
}

#myBtn:hover {
  background-color: #555; /* Add a dark-grey background on hover */
}

</style>
 

 

Footer (the actual button and the JavaScript):

 

<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>

<script>
document.addEventListener('DataPageReady', function (event) {

mybutton = document.getElementById("myBtn");

window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (window.scrollY==0) {
    mybutton.style.display = "none";
  } else {
    mybutton.style.display = "block";
  }
}

 

})

function topFunction() {
window.scrollTo({top: 0, behavior: 'smooth'});
}
</script>

 

 

[futurist]

Hi,

I saw this feature in another app wherein for each turn of the page, the screen scrolls back up to the top, which is useful especially if for each page you have a long list of records and scrolling to the top every single time is not a good user experience. 

 

Here's the script:

<script>

document.addEventListener('DataPageReady', function (event) {

window.scrollTo({top: 0, behavior: 'smooth'});

});
</script>

So on the DataPage, once the user clicks on any of the navigation buttons (to turn to next, previous, first or last page), the screen automatically scrolls back to the top.

 

[Kurumi]

Hi - Here are other some other codes for scrolling up/scrolling to top:
https://stackoverflow.com/questions/4210798/how-to-scroll-to-top-of-page-with-javascript-jquery
https://www.w3schools.com/howto/howto_js_scroll_to_top.asp