Jump to content

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


Recommended Posts

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>

 

 

Link to comment
Share on other sites

  • 1 month later...

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.

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...