Jump to content

Search the Community

Showing results for tags 'scroll to top'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • Caspio Bridge
    • Caspio Apps for Ukraine
    • General Questions
    • Caspio JavaScript Solutions
    • Tables, Views and Relationships
    • Import/Export and DataHub
    • DataPages
    • Deployment
    • Security, Authentications, Roles, SAML
    • Styles and Localizations
    • Parameters
    • API and Integration
    • Calculations and aggregations
    • User JavaScript and CSS Discussions

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


MSN


Website URL


ICQ


Yahoo


Skype


Location


Interests

Found 1 result

  1. 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>
×
×
  • Create New...