Enter fullscreen mode

"W3xG0R8ES_dhlXhNnP1VNN03oAQG2hYF_1ZCpf5ETak"}],["$","meta","5",{"name":"google-adsense-account","content":"ca-pub-5834256338017594"}],["$","meta","6",{"name":"google-site-verification","content":"W3xG0R8ES_dhlXhNnP1VNN03oAQG2hYF_1ZCpf5ETak"}],["$","meta","7",{"property":"og:title","content":"✨ CSS bits: Smooth Scroll Animations with scroll-behavior / Powered by Dev Resource / dev-resources.site 💗"}],["$","meta","8",{"property":"og:description","content":"html { scroll-behavior: smooth; } Enter fullscreen mode Exit fullscreen mode ... / Powered by Dev Resource / dev-resources.site 💗"}],["$","meta","9",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","10",{"name":"twitter:title","content":"✨ CSS bits: Smooth Scroll Animations with scroll-behavior / Powered by Dev Resource / dev-resources.site 💗"}],["$","meta","11",{"name":"twitter:description","content":"html { scroll-behavior: smooth; } Enter fullscreen mode Exit fullscreen mode ... / Powered by Dev Resource / dev-resources.site 💗"}],["$","link","12",{"rel":"icon","href":"/favicon.ico","type":"image/x-icon","sizes":"16x16"}]] 3:null 13:I[7558,["609","static/chunks/609-cc37860f8f268b0f.js","116","static/chunks/app/topic/%5Btopic%5D/%5B...data%5D/page-a437ece3f1b32566.js"],"default"] 14:T4bb,

html {
  scroll-behavior: smooth;
}

Explanation: This single line of CSS makes all anchor links and programmatic scrolls smooth and animated. It's a subtle but impactful improvement to user navigation.

4:["$","div",null,{"className":"p-1","children":[["$","div",null,{"children":["$","div",null,{"className":"mb-4 prose prose-sm md:prose-base prose-invert prose-neutral max-w-none","children":[["$","div",null,{"className":"mb-4 rounded-xl grid grid-cols-1 border border-neutral-800 divide-y divide-neutral-800 overflow-hidden","children":[["$","div",null,{"className":"p-2 px-4 py-6 flex flex-row justify-between bg-neutral-900 relative","children":["$","h1",null,{"className":"pb-0 mb-0","children":"✨ CSS bits: Smooth Scroll Animations with scroll-behavior"}]}],["$","div",null,{"className":"p-2 px-4 flex flex-row justify-between bg-neutral-900 relative","children":[["$","div",null,{"className":"font-bold text-foreground text-xs md:text-base flex items-center justify-center","children":"Published at"}],["$","div",null,{"className":"text-xs flex items-center justify-end space-x-3 text-foreground/60","children":["$","div",null,{"className":"inline-flex text-amber-500 text-xs opacity-80","children":"12/16/2024"}]}]]}],["$","div",null,{"className":"p-2 px-4 flex flex-row justify-between bg-neutral-900 relative","children":[["$","div",null,{"className":"font-bold text-foreground text-xs md:text-base flex items-center justify-center","children":"Categories"}],["$","div",null,{"className":"text-xs flex items-center flex-wrap justify-end gap-2 text-foreground/60","children":[["$","div","0",{"className":"inline-flex bg-amber-500 text-neutral-950 px-1 rounded text-xs opacity-80","children":"css"}],["$","div","1",{"className":"inlin