fix tab position in viewport (#284)

Updates the tab scroll to take the elements position before and after
all the tabs have been switched so that the difference can be used for
the `scrollTo`. The `scrollTo` behavior changes to instant, because we
are effectively masking the fact that the tab position would move
without a scrollTo, and we are moving it back to where it was before the
tab was clicked.

Author: recrwplay

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, // scroll back to the same position before the click
+      behavior: 'instant', // instantly so nothing is visible to the user
     })
   }
 

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, // scroll back to the same position before the click
+      behavior: 'instant', // instantly so nothing is visible to the user
     })
 
     if (sessionStorageAvailable) {