diff --git a/src/components/HomePageHeader.js b/src/components/HomePageHeader.js
index 3ef8b7b3..2d95bc86 100644
--- a/src/components/HomePageHeader.js
+++ b/src/components/HomePageHeader.js
@@ -10,6 +10,10 @@ import IconBannerSource from '../../static/icons/banner_source.svg';
 import IconBannerDocs from '../../static/icons/banner_docs.svg';
 import IconDownArrow from '../../static/icons/interface_down.svg';
 
+const scrollToFeatures = () => {
+  document.querySelector('#go-down').scrollIntoView({ behavior: 'smooth' });
+};
+
 export default function HomepageHeader() {
   const { siteConfig } = useDocusaurusContext();
   const [showMore, setShowMore] = useState(false);
@@ -40,7 +44,7 @@ export default function HomepageHeader() {
         </span>
       </div>
       {(!showMore) &&
-        <a href="#go-down" className={styles.scrollDown} id="go-down">
+        <a onClick={scrollToFeatures} className={styles.scrollDown} id="go-down">
           <IconDownArrow className={styles.scrollDownIcon} />
           <span className={styles.scrollDownText}>Feature List</span>
           <IconDownArrow className={styles.scrollDownIcon} />
diff --git a/src/styles/custom.scss b/src/styles/custom.scss
index fd6631c4..4c163dde 100644
--- a/src/styles/custom.scss
+++ b/src/styles/custom.scss
@@ -60,6 +60,10 @@ nav.navbar {
   }
 }
 
+html {
+  scroll-behavior: smooth;
+}
+
 body {
   background: var(--background);
 }