xxxxxxxxxx
html {
scroll-behavior: smooth;
}
/* No support in IE, or Safari
You can use this JS polyfill for those */
http://iamdustan.com/smoothscroll/
xxxxxxxxxx
/* 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;
}
}
xxxxxxxxxx
html {
scroll-behavior: smooth;
}
:target {
scroll-margin-top: 15em;
}
xxxxxxxxxx
html {
scroll-behavior: smooth;
/* Add any other CSS styles for the HTML element */
}
/* Additional CSS styles for your webpage */
xxxxxxxxxx
<!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>