{"id":253758,"date":"2017-04-18T05:33:03","date_gmt":"2017-04-18T12:33:03","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=253758"},"modified":"2020-01-30T09:03:43","modified_gmt":"2020-01-30T16:03:43","slug":"scroll-behavior","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/s\/scroll-behavior\/","title":{"rendered":"scroll-behavior"},"content":{"rendered":"<p>The <code>scroll-behavior<\/code> property in CSS allows us to define whether the scroll location of the browser jumps to a new location or <em>smoothly animates<\/em> the transition when a user clicks a link that targets an anchored position within a scrolling box.<\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">html {\r\n  scroll-behavior: smooth;\r\n}<\/code><\/pre>\n<p><!--more--><\/p>\n<h3>Deeper Explanation<\/h3>\n<p><em>Wait, wait, what&#8217;s this scrolling box we speak of?<\/em> It&#8217;s an element with content that overflows its bounds.<\/p>\n<p data-height=\"314\" style=\"height: 314px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-slug-hash=\"pPJzme\" data-default-tab=\"result\" data-user=\"css-tricks\" data-embed-version=\"2\" data-pen-title=\"Scrolling Box\" class=\"codepen\">See the Pen <a href=\"http:\/\/codepen.io\/team\/css-tricks\/pen\/pPJzme\/\" rel=\"noopener\">Scrolling Box<\/a> by CSS-Tricks (<a href=\"http:\/\/codepen.io\/css-tricks\" rel=\"noopener\">@css-tricks<\/a>) on <a href=\"http:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/p>\n<p>Notice how the box in the demo above has a fixed height of <code>200px<\/code>? Any content that exceeds that height is outside the bounds of the box and we&#8217;ve added <code>overflow-y: scroll<\/code> to make that additional content accessible with vertical scrolling. That is what we mean by a scrolling box.<\/p>\n<p>Now let&#8217;s say we add a navigation to the top of the box with each link targeting the three sections of content:<\/p>\n<p data-height=\"305\" style=\"height: 305px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-slug-hash=\"OmVLeP\" data-default-tab=\"result\" data-user=\"css-tricks\" data-embed-version=\"2\" data-pen-title=\"Scrolling Box w\/Nav\" class=\"codepen\">See the Pen <a href=\"https:\/\/codepen.io\/team\/css-tricks\/pen\/OmVLeP\/\" rel=\"noopener\">Scrolling Box w\/Nav<\/a> by CSS-Tricks (<a href=\"http:\/\/codepen.io\/css-tricks\" rel=\"noopener\">@css-tricks<\/a>) on <a href=\"http:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/p>\n<p>Each link takes the user directly to the different sections of content inside of the scrolling box. By default, that transition between is an abrupt jump.<\/p>\n<figure id=\"post-253759\" class=\"align-none media-253759\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/04\/alamanac-css-scroll-behavior-auto.gif?ssl=1\" alt=\"\" data-recalc-dims=\"1\" \/><figcaption>The jump between content is abrupt and sudden by default.<\/figcaption><\/figure>\n<p>That sort of a jump can be jarring. That&#8217;s where <code>scroll-behavior<\/code> comes in and allows us to set a smooth scrolling transition. This sort of thing used to take <a href=\"https:\/\/css-tricks.com\/snippets\/jquery\/smooth-scrolling\/\">fancy Javascript<\/a> but <code>scroll-behavior<\/code> will give us the ability to do that natively in CSS, once browser support improves.<\/p>\n<figure id=\"post-253760\" class=\"align-none media-253760\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/04\/alamanac-css-scroll-behavior-smooth.gif?ssl=1\" alt=\"\" data-recalc-dims=\"1\" \/><figcaption>The jump between content is animated in a smooth transition.<\/figcaption><\/figure>\n<h3>Syntax<\/h3>\n<pre rel=\"CSS\"><code class=\"language-css\">.module {\r\n  scroll-behavior: [ auto | smooth ];\r\n}<\/code><\/pre>\n<h3>Values<\/h3>\n<p>The <code>scroll-behavior<\/code> property accepts two values, which essentially toggle the smooth scrolling feature on and off.<\/p>\n<ul>\n<li><code>auto<\/code> (default): This value allows the abrupt jump between elements within the scrolling box.<\/li>\n<li><code>smooth<\/code>: True to its name, this value is the smooth animated transition between elements within the scrolling box.<\/li>\n<\/ul>\n<h3>Demo<\/h3>\n<p>The following demo will only work on Chrome 61+, Firefox 36+, and Opera 48+ at the time of this writing.<\/p>\n<p data-height=\"305\" style=\"height: 305px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-slug-hash=\"xdGKoJ\" data-default-tab=\"css,result\" data-user=\"css-tricks\" data-embed-version=\"2\" data-pen-title=\"Scrolling Box w\/ `scroll-behavior`\" class=\"codepen\">See the Pen <a href=\"https:\/\/codepen.io\/team\/css-tricks\/pen\/xdGKoJ\/\" rel=\"noopener\">Scrolling Box w\/ `scroll-behavior`<\/a> by CSS-Tricks (<a href=\"http:\/\/codepen.io\/css-tricks\" rel=\"noopener\">@css-tricks<\/a>) on <a href=\"http:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/p>\n<h3>Browser Support<\/h3>\n<div class=\"caniuse\"><div class=\"caniuse-header\"><p>This browser support data is from <a href=\"http:\/\/caniuse.com\/#feat=css-scroll-behavior\" rel=\"noopener\">Caniuse<\/a>, which has more detail. A number indicates that browser supports the feature at that version and up.<\/p><\/div><div class=\"caniuse-section\"><h4>Desktop<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"chrome\"><span>Chrome<\/span><\/th><th class=\"firefox\"><span>Firefox<\/span><\/th><th class=\"ie\"><span>IE<\/span><\/th><th class=\"edge\"><span>Edge<\/span><\/th><th class=\"safari\"><span>Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Chrome - \"><span class=\"caniuse-agents-version version\">61<\/span><\/td><td class=\"y yep\" title=\"Firefox - \"><span class=\"caniuse-agents-version version\">36<\/span><\/td><td class=\"n nope\" title=\"IE - \"><span class=\"caniuse-agents-version version\">No<\/span><\/td><td class=\"y yep\" title=\"Edge - \"><span class=\"caniuse-agents-version version\">79<\/span><\/td><td class=\"y yep\" title=\"Safari - \"><span class=\"caniuse-agents-version version\">15.4<\/span><\/td><\/tr><\/table><\/div><div class=\"caniuse-section\"><h4>Mobile \/ Tablet<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"and_chr\"><span>Android Chrome<\/span><\/th><th class=\"and_ff\"><span>Android Firefox<\/span><\/th><th class=\"android\"><span>Android<\/span><\/th><th class=\"ios_saf\"><span>iOS Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Android Chrome - \"><span class=\"caniuse-agents-version version\">124<\/span><\/td><td class=\"y yep\" title=\"Android Firefox - \"><span class=\"caniuse-agents-version version\">125<\/span><\/td><td class=\"y yep\" title=\"Android - \"><span class=\"caniuse-agents-version version\">124<\/span><\/td><td class=\"y yep\" title=\"iOS Safari - \"><span class=\"caniuse-agents-version version\">15.4<\/span><\/td><\/tr><\/table><\/div><\/div>\n<h3>More Information<\/h3>\n<ul>\n<li><a href=\"https:\/\/drafts.csswg.org\/cssom-view\/#smooth-scrolling\" rel=\"noopener\">CSSOM View Module<\/a>: The draft specification, including the CSS property. The current draft includes a recommendation to move the <code>scroll-behavior<\/code> to another spec, so it will be interesting to see where that lands.<\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/scroll-behavior\" rel=\"noopener\">Mozilla Developer Network<\/a>: The MDN reference for the specification<\/li>\n<li><a href=\"https:\/\/developer.microsoft.com\/en-us\/microsoft-edge\/platform\/status\/cssomviewsmoothscrollapi\/\" rel=\"noopener\">Microsoft Edge Platform Status<\/a>: Currently displays the status of this feature as Under Consideration<\/li>\n<li><a href=\"https:\/\/www.chromestatus.com\/feature\/5812155903377408\" rel=\"noopener\">Chrome Platform Status<\/a>: Currently shows the status of this feature as In Development and includes statuses for other platforms as an aside<\/li>\n<li><a href=\"https:\/\/css-tricks.com\/snippets\/jquery\/smooth-scrolling\/\">Smooth Scrolling Snippet<\/a>: Snippets to enable smooth scrolling with Javascript and jQuery<\/li>\n<li><a href=\"https:\/\/css-tricks.com\/smooth-scrolling-accessibility\/\">Smooth Scrolling and Accessibility<\/a>: A CSS-Tricks post on the impact of Javascript-enabled smooth scrolling<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>The scroll-behavior property in CSS allows us to define whether the scroll location of the browser jumps to a new location or smoothly animates the transition when a user clicks a link that targets an anchored position within a scrolling box. html { scroll-behavior: smooth; }<\/p>\n","protected":false},"author":2508,"featured_media":0,"parent":13947,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-almanac-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[1224,754,1215],"acf":[],"jetpack-related-posts":[{"id":3770,"url":"https:\/\/css-tricks.com\/snippets\/jquery\/smooth-scrolling\/","url_meta":{"origin":253758,"position":0},"title":"Smooth Scrolling","date":"September 4, 2009","format":false,"excerpt":"Hey! Before you go too far down the rabbit hole of JavaScript-based smooth scrolling, know that there is a native CSS feature for this: scroll-behavior. html { scroll-behavior: smooth; } And before you reach for a library like jQuery to help, there is also a native JavaScript version of smooth\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":283666,"url":"https:\/\/css-tricks.com\/almanac\/properties\/o\/overscroll-behavior\/","url_meta":{"origin":253758,"position":1},"title":"overscroll-behavior","date":"September 14, 2021","format":false,"excerpt":"The overscroll-behavior CSS property controls whether an element will use \u201cscroll chaining\u201d or not. You have likely experienced this behavior before and perhaps took it for granted that scrolling works like this on the web! If you are inside of an element that has its own scrolling (say it\u2019s vertical)\u2026","rel":"","context":"In \"overflow\"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/03\/overflow.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":21524,"url":"https:\/\/css-tricks.com\/snippets\/css\/momentum-scrolling-on-ios-overflow-elements\/","url_meta":{"origin":253758,"position":2},"title":"Momentum Scrolling on iOS Overflow Elements","date":"May 4, 2013","format":false,"excerpt":"Web pages on iOS by default have a \"momentum\" style scrolling where a flick of the finger sends the web page scrolling and it keeps going until eventually slowing down and stopping as if friction is slowing it down. Like if you were to push a hockey puck across the\u2026","rel":"","context":"With 105 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14081,"url":"https:\/\/css-tricks.com\/almanac\/properties\/o\/overflow\/","url_meta":{"origin":253758,"position":3},"title":"overflow","date":"September 5, 2011","format":false,"excerpt":"The overflow property controls what happens to content that breaks outside of its bounds: imagine a div in which you've explicitly set to be 200px wide, but contains an image that is 300px wide. That image will stick out of the div and be visible by default. Whereas if you\u2026","rel":"","context":"In \"overflow\"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/overflow-visible.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":281999,"url":"https:\/\/css-tricks.com\/almanac\/properties\/s\/scroll-snap-type\/","url_meta":{"origin":253758,"position":4},"title":"scroll-snap-type","date":"February 4, 2019","format":false,"excerpt":"The scroll-snap-type property is part of the CSS Scroll Snap Module. Scroll snapping refers to \"locking\" the position of the viewport to specific elements on the page as the window (or a scrollable container) is scrolled. Think of it like putting a magnet on top of an element that sticks\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/02\/fingers-snap.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":14121,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/top-right-bottom-left\/","url_meta":{"origin":253758,"position":5},"title":"top \/ bottom \/ left \/ right","date":"September 6, 2011","format":false,"excerpt":"The top, bottom, left, and right properties are used with position to set the placement of an element. They only have an effect on positioned elements, which are elements with the position property set to anything other than static. For example: relative, absolute, fixed, or sticky. div { : ||\u2026","rel":"","context":"In \"bottom\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/253758"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/2508"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=253758"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/253758\/revisions"}],"predecessor-version":[{"id":302964,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/253758\/revisions\/302964"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13947"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=253758"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=253758"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}