diff --git a/css/style.css b/css/style.css
index 3dd880e3be..f45f0a39d2 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,6 +1,20 @@
 * {
   box-sizing: border-box;
   -webkit-tap-highlight-color: transparent;
+  scroll-behavior: smooth;
+}
+
+/* handle header offset with scroll-margin */
+h1, h2, h3, h4, h5, h6,
+[id] {
+  scroll-margin-top: 60px;
+}
+
+/* Respect user motion preferences for access */
+@media (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto;
+  }
 }
 
 body {
@@ -258,11 +272,6 @@ a {
   padding-top: 40px;
 }
 
-#api-doc *:target, #page-doc *:target {
- margin-top: -120px;
- padding-top: 120px;
- z-index: -1;
-}
 
 /* logo */
 .logo-container a {
diff --git a/js/app.js b/js/app.js
index ea24dc2f4c..0d779d8062 100644
--- a/js/app.js
+++ b/js/app.js
@@ -11,17 +11,6 @@ if (langDisplay) {
   langDisplay.textContent = matchedLang ? matchedLang.name : 'English';
 }
 
-// scroll to top of the page
-if (scrollToTopBtn) {
-  scrollToTopBtn.addEventListener("click", function (e) {
-    e.preventDefault();
-    window.scrollTo({
-      top: 0,
-      behavior: "smooth"
-    })
-  })
-}
-
 // add/remove class 'scroll' on scroll by 5px
 const scrollTarget = document.querySelector('.logo-container');
 const scrollObserver = new IntersectionObserver(
diff --git a/js/menu.js b/js/menu.js
index c124f863cb..c617727f0c 100644
--- a/js/menu.js
+++ b/js/menu.js
@@ -186,8 +186,8 @@ toggleBtn?.addEventListener("click", (e) => {
 // Open/Close sub TOC content on click
 document.querySelectorAll("#menu > li > a").forEach((link) => {
 	link.addEventListener("click", function (event) {
-	  event.preventDefault(); // stop navigation to submenu
-  
+      event.preventDefault(); // stop navigation to submenu
+
 	  // Find the closest parent <li>
 	  const closestLiParent = link.closest("li");
 	  const childUlSubMenu = closestLiParent.children[1];