<!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 Example</title> <style> /* Style for demonstration */ #content { margin-top: 2000px; } </style> </head> <body> <!-- Link to scroll to the top --> <a href="#id" onclick="scrollToTop()">Scroll to id</a> <!-- Content to create scrollable space --> <div id="content"></div> <!-- Element to scroll to --> <a id="id">id</a> <script> // Function to scroll to the top of the screen function scrollToTop() { var id = event.target.getAttribute('href').slice(1); // Get the ID from href var element = document.getElementById(id); if (element) { element.scrollIntoView({ behavior: "smooth", block: "start" }); // Scroll to the top of the element } event.preventDefault(); } </script> </body> </html>html { scroll-behavior: smooth; } /* No support in IE, or Safari You can use this JS polyfill for those */ http://iamdustan.com/smoothscroll/ /* Apply smooth scroll to all anchor links */ a { transition: 0.5s ease-in-out; scroll-behavior: smooth; } /* Optional: Customizes scroll offset for different browsers */ @-moz-document url-prefix() { html { scroll-behavior: smooth; scroll-padding-top: 100px; /* Adjust offset as needed */ } } @supports (scroll-behavior: smooth) { html, body { scrollbar-width: thin; scrollbar-color: transparent transparent; } html::-webkit-scrollbar, body::-webkit-scrollbar { width: 6px; background-color: transparent; } html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb { background-color: transparent; } }html { scroll-behavior: smooth; } :target { scroll-margin-top: 15em; } html {scroll-behavior: smooth;}html{scroll-behavior:smooth}$('#element').foundation('_destroy');