<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Scroll top button</title> </head> <body> <style> /* ------------------style CSS------------------ */ *{ margin: 0; padding: 0; box-sizing: border-box; } main{ height: 2000px; background: rgb(48,43,99); background: linear-gradient(90deg, rgba(48,43,99,1) 0%, rgba(0,0,0,1) 100%, rgba(36,36,62,1) 100%); } #topBtn { display: none; } @media (max-width: 900px){ #topBtn { height: 50px; width: 50px; margin-right: 20px; position: fixed; bottom: 20px; right: 2px; font-size: 18px; border: none; outline: none; background: rgb(255, 255, 255); color: rgb(0, 0, 0); cursor: pointer; border-radius: 4px; } } </style> <!-- --------------affichage------------- --> <main> <button onclick="topFunction()" id="topBtn" title="Go to top">🡱</button> </main> <!-- ------------------javascript------------ --> <script> let mybutton = document.getElementById("topBtn"); window.onscroll = function() {scrollFunction()}; function scrollFunction() { if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { mybutton.style.display = "block"; } else { mybutton.style.display = "none"; } } function topFunction() { document.body.scrollTop = 0; document.documentElement.scrollTop = 0; } </script> </body> </html>