<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bibhuti Solutions</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet"> <style> .back-to-top { position: fixed; bottom: 20px; right: 10px; display: none; background-color: #C52903; color: white; border: none; border-radius: 12%; width: 40px; height: 40px; justify-content: center; align-items: center; z-index: 1000; cursor: pointer; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); } @media screen and (max-width: 768px) { .back-to-top { height: 20px ; width: 20px ; padding: 15px; } } .back-to-top:hover { background-color: grey; } .back-to-top i { font-size: 24px; } </style> <script> document.addEventListener("DOMContentLoaded", function () { const backToTopButton = document.getElementById("back-to-top"); window.addEventListener("scroll", function () { if (window.scrollY > 200) { backToTopButton.style.display = "flex"; } else { backToTopButton.style.display = "none"; } }); backToTopButton.addEventListener("click", function () { window.scrollTo({ top: 0, behavior: "smooth" }); }); }); </script> </head> <body> <?php echo ' <button id="back-to-top" class="back-to-top"> <i class="bi bi-arrow-up"></i> </button> '; ?> </body> </html>