screen_rotation
Copied to Clipboard
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Scroll to Top Button</title> <style> body { height: 1500px } #scrollToTopBtn { display: none; position: fixed; bottom: 20px; right: 20px; background-color: #007BFF; color: #fff; border: none; border-radius: 5px; padding: 10px; cursor: pointer; } </style> </head> <body> <!-- Your page content goes here --> <h3>JQuery Scroll to Top Button</h3> <button id="scrollToTopBtn">Scroll to Top</button> <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script> <script> $(document).ready(function () { // Show/hide the button based on scroll position $(window).scroll(function () { if ($(this).scrollTop() > 100) { $('#scrollToTopBtn').fadeIn(); } else { $('#scrollToTopBtn').fadeOut(); } }); // Scroll to top when the button is clicked $('#scrollToTopBtn').click(function () { $('html, body').animate({ scrollTop: 0 }, 800); return false; }); }); </script> </body> </html>