Scroll to top on iOS (#1777)

Closes #1734.

assets/css/layout.css

@@ -7,7 +7,7 @@ body {
 
 body {
   --sidebarWidth: 300px;
-  --sidebarTransitionDuration: .3s;
+  --sidebarTransitionDuration: 0.3s;
   background-color: var(--background);
   color: var(--textBody);
   font-size: 16px;
@@ -57,15 +57,10 @@ body {
   z-index: 3;
 }
 
-@media screen and (max-width: 768px) {
-  .content {
-    overflow: auto;
-    scroll-padding-top: 45px;
-  }
-}
-
 body:is(.sidebar-opening, .sidebar-opened) .sidebar-button {
-  transform: translateX(calc(var(--sidebarWidth) - 100% - var(--sidebarButtonRightOpen)));
+  transform: translateX(
+    calc(var(--sidebarWidth) - 100% - var(--sidebarButtonRightOpen))
+  );
   top: var(--sidebarButtonTopOpen);
 }
 
@@ -117,7 +112,7 @@ body.sidebar-closed .content {
 @media screen and (max-width: 768px) {
   .sidebar-button:before {
     --sidebarButtonHeight: 60px;
-    content: '';
+    content: "";
     display: block;
     z-index: -1;
     pointer-events: none;
@@ -145,13 +140,13 @@ body.sidebar-closed .content {
 
 body.search-focused .sidebar-button {
   transform: translateX(250px) scaleY(0);
-  transition: all .15s ease-out;
+  transition: all 0.15s ease-out;
   opacity: 0;
 }
 
 body.search-focused .sidebar-search .search-close-button {
   transform: scaleY(1);
-  transition: transform .15s ease-out .15s;
+  transition: transform 0.15s ease-out 0.15s;
 }
 
 .content-inner {

assets/js/content.js

@@ -81,3 +81,23 @@ function getLivebookDevRunUrl (notebookUrl) {
 function getLivebookImportUrl (livebookUrl, notebookUrl) {
   return `${livebookUrl}/import?url=${encodeURIComponent(notebookUrl)}`
 }
+
+// Check if the device width is below a certain threshold (e.g., 768px for mobile)
+document.addEventListener('click', function (e) {
+  if (window.innerWidth <= 768) {
+    const target = e.target.closest('a[href^="#"]')
+    if (target) {
+      e.preventDefault()
+      const targetId = target.getAttribute('href').substring(1)
+      const targetElement = document.getElementById(targetId)
+      if (targetElement) {
+        const offset = 45 // Adjust this offset as needed
+        const targetPosition = targetElement.getBoundingClientRect().top + window.scrollY - offset
+        window.scrollTo({
+          top: targetPosition,
+          behavior: 'smooth'
+        })
+      }
+    }
+  }
+})