How TO - Smooth Scroll
Clash Royale CLAN TAG#URR8PPP googletag.cmd.push(function() googletag.display('div-gpt-ad-1422003450156-2'); );
How TO - Smooth Scroll
❮ Previous
Next ❯
Learn how to create a smooth scrolling effect with CSS.
Smooth Scrolling
Note: This example does not work in Internet Explorer, Edge or Safari.
Section 1
Click on the link to see the "smooth" scrolling effect.
Click Me to Smooth Scroll to Section 2 Below
Note: Remove the scroll-behavior property to remove smooth scrolling.
Section 2
Click Me to Smooth Scroll to Section 1 Above
Smooth Scrolling
Add scroll-behavior: smooth to the <html> element to enable smooth scrolling for the whole page (note: it is also possible to add it to a specific element/scroll container):
Example
html
scroll-behavior: smooth;
Try it Yourself »
Browser Support
The numbers in the table specify the first browser version that fully supports the scroll-behavior property.
| Property | |||||
|---|---|---|---|---|---|
| scroll-behavior | 61.0 | Not supported | 36.0 | Not supported | Yes |
Cross-browser Support
For browsers that do not support the scroll-behavior property, you could use JavaScript or a JavaScript library, like jQuery, to create a solution that will work for all browsers:
Example
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function()
// Add smooth scrolling to all
links
$("a").on('click', function(event)
// Make sure this.hash
has a value before overriding default behavior
if (this.hash !== "")
// Prevent default anchor click behavior
event.preventDefault();
//
Store hash
var hash = this.hash;
// Using jQuery's animate() method
to add smooth page scroll
// The optional number (800) specifies the number
of milliseconds it takes to scroll to the specified area
$('html,
body').animate(
scrollTop: $(hash).offset().top
, 800, function()
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
);
// End if
);
);
</script>Try it Yourself »
❮ Previous
Next ❯
