diff --git a/docs/pages/index/+Page.tsx b/docs/pages/index/+Page.tsx
index 9f131a2259..4f63f32495 100644
--- a/docs/pages/index/+Page.tsx
+++ b/docs/pages/index/+Page.tsx
@@ -1,11 +1,17 @@
 export { Page }
 
-import React from 'react'
+import React, { useEffect } from 'react'
 import { Header } from './Header'
 import { Features } from './Features'
 import { Contributors, Sponsors } from '@brillout/docpress'
 
 function Page() {
+  useEffect(() => {
+    const cl = document.documentElement.classList
+    const cls = 'scroll-behavior-smooth'
+    cl.add(cls)
+    return () => cl.remove(cls)
+  })
   return (
     <>
       <Header />
diff --git a/docs/pages/index/FeaturesLayout.css b/docs/pages/index/FeaturesLayout.css
index 0d785e0db3..8793b3b543 100644
--- a/docs/pages/index/FeaturesLayout.css
+++ b/docs/pages/index/FeaturesLayout.css
@@ -1,3 +1,6 @@
+html.scroll-behavior-smooth {
+  scroll-behavior: smooth;
+}
 #feature-list h2 {
   font-size: 2.2em;
   padding-top: 50px;