From 352a07c66a472be47bb4aa3f9f4320a024dcdc27 Mon Sep 17 00:00:00 2001
From: Neil Dewhurst <ndewhurst@gmail.com>
Date: Wed, 27 Nov 2024 16:46:25 +0000
Subject: [PATCH 1/2] fix tab position inv viewport

---
 src/js/06-code.js       | 28 ++++++++++++++--------------
 src/js/08-tabs-block.js | 28 ++++++++++++++--------------
 2 files changed, 28 insertions(+), 28 deletions(-)

diff --git a/src/js/06-code.js b/src/js/06-code.js
index 43c7f34f..b0ee5266 100644
--- a/src/js/06-code.js
+++ b/src/js/06-code.js
@@ -256,6 +256,16 @@ document.addEventListener('DOMContentLoaded', function () {
   var switchTab = function (e) {
     var tab = e.target
     var title = tab.innerHTML
+
+    var toolbarOffset = 0
+    var toolbar = document.querySelector('.toolbar')
+    if (toolbar.offsetHeight) {
+      toolbarOffset = toolbar.offsetHeight
+    }
+    var offset = document.querySelector('.navbar').offsetHeight + toolbarOffset + 20
+    var topOfWindowPosition = window.scrollY + offset
+    var topOfTabPosition = tab.getBoundingClientRect().top + window.scrollY
+
     // Switch Tabs
     var targetTabs = document.querySelectorAll('.tabbed-target[data-title="' + title + '"]')
     targetTabs.forEach(function (target) {
@@ -277,22 +287,12 @@ document.addEventListener('DOMContentLoaded', function () {
         })
     })
 
-    var toolbarOffset = 0
-    var toolbar = document.querySelector('.toolbar')
-    if (toolbar.offsetHeight) {
-      toolbarOffset = toolbar.offsetHeight
-    }
-    var offset = document.querySelector('.navbar').offsetHeight + toolbarOffset + 20
-
-    var vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0)
-    var bodyRect = document.body.getBoundingClientRect().top
-    var elementRect = tab.getBoundingClientRect().top
-    var elementPosition = elementRect - bodyRect
-    var offsetPosition = elementPosition - offset - vh / 5
+    var newTopOfTabPosition = tab.getBoundingClientRect().top + window.scrollY
+    var shift = topOfTabPosition - newTopOfTabPosition
 
     window.scrollTo({
-      top: offsetPosition, // center clicked tab to a fifth of viewport height
-      behavior: 'smooth',
+      top: topOfWindowPosition - shift - offset, // center clicked tab to a fifth of viewport height
+      behavior: 'instant',
     })
   }
 
diff --git a/src/js/08-tabs-block.js b/src/js/08-tabs-block.js
index 731ee727..3c2d4cc6 100644
--- a/src/js/08-tabs-block.js
+++ b/src/js/08-tabs-block.js
@@ -42,6 +42,16 @@ document.addEventListener('DOMContentLoaded', function () {
     var tab = e.target
     var lang = tab.dataset.lang
     var title = tab.dataset.title
+
+    var toolbarOffset = 0
+    var toolbar = document.querySelector('.toolbar')
+    if (toolbar.offsetHeight) {
+      toolbarOffset = toolbar.offsetHeight
+    }
+    var offset = document.querySelector('.navbar').offsetHeight + toolbarOffset + 20
+    var topOfWindowPosition = window.scrollY + offset
+    var topOfTabPosition = tab.getBoundingClientRect().top + window.scrollY
+
     // Switch Tabs
     var targetTabs = document.querySelectorAll('.tabbed-target[data-title="' + title + '"]')
     targetTabs.forEach(function (target) {
@@ -63,22 +73,12 @@ document.addEventListener('DOMContentLoaded', function () {
         })
     })
 
-    var toolbarOffset = 0
-    var toolbar = document.querySelector('.toolbar')
-    if (toolbar.offsetHeight) {
-      toolbarOffset = toolbar.offsetHeight
-    }
-    var offset = document.querySelector('.navbar').offsetHeight + toolbarOffset + 20
-
-    var vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0)
-    var bodyRect = document.body.getBoundingClientRect().top
-    var elementRect = tab.getBoundingClientRect().top
-    var elementPosition = elementRect - bodyRect
-    var offsetPosition = elementPosition - offset - vh / 5
+    var newTopOfTabPosition = tab.getBoundingClientRect().top + window.scrollY
+    var shift = topOfTabPosition - newTopOfTabPosition
 
     window.scrollTo({
-      top: offsetPosition, // center clicked tab to a fifth of viewport height
-      behavior: 'smooth',
+      top: topOfWindowPosition - shift - offset, // center clicked tab to a fifth of viewport height
+      behavior: 'instant',
     })
 
     if (sessionStorageAvailable) {

From 571252bfda6a01171dc485a9a2f85b2292df1475 Mon Sep 17 00:00:00 2001
From: Neil Dewhurst <ndewhurst@gmail.com>
Date: Fri, 29 Nov 2024 09:36:00 +0000
Subject: [PATCH 2/2] update comment text

---
 src/js/06-code.js       | 4 ++--
 src/js/08-tabs-block.js | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/js/06-code.js b/src/js/06-code.js
index b0ee5266..2b94780c 100644
--- a/src/js/06-code.js
+++ b/src/js/06-code.js
@@ -291,8 +291,8 @@ document.addEventListener('DOMContentLoaded', function () {
     var shift = topOfTabPosition - newTopOfTabPosition
 
     window.scrollTo({
-      top: topOfWindowPosition - shift - offset, // center clicked tab to a fifth of viewport height
-      behavior: 'instant',
+      top: topOfWindowPosition - shift - offset, // scroll back to the same position before the click
+      behavior: 'instant', // instantly so nothing is visible to the user
     })
   }
 
diff --git a/src/js/08-tabs-block.js b/src/js/08-tabs-block.js
index 3c2d4cc6..dadb0dae 100644
--- a/src/js/08-tabs-block.js
+++ b/src/js/08-tabs-block.js
@@ -77,8 +77,8 @@ document.addEventListener('DOMContentLoaded', function () {
     var shift = topOfTabPosition - newTopOfTabPosition
 
     window.scrollTo({
-      top: topOfWindowPosition - shift - offset, // center clicked tab to a fifth of viewport height
-      behavior: 'instant',
+      top: topOfWindowPosition - shift - offset, // scroll back to the same position before the click
+      behavior: 'instant', // instantly so nothing is visible to the user
     })
 
     if (sessionStorageAvailable) {