Fixed scroll offset for elements with id.

Bemoth · May 20, 2018 · d849d87 · d849d87
1 parent de4ea69
commit d849d87
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 12 deletions.
diff --git a/dist/swup.js b/dist/swup.js
@@ -1,14 +1,10 @@
 (function webpackUniversalModuleDefinition(root, factory) {
-	//Test Comment
 	if(typeof exports === 'object' && typeof module === 'object')
 		module.exports = factory();
-	//Test Comment
 	else if(typeof define === 'function' && define.amd)
 		define([], factory);
-	//Test Comment
 	else if(typeof exports === 'object')
 		exports["Swup"] = factory();
-	//Test Comment
 	else
 		root["Swup"] = factory();
 })(window, function() {
@@ -248,10 +244,11 @@ module.exports = function (popstate) {
 
             var element = document.querySelector(self.scrollToElement);
             if (element != null) {
+                var top = element.getBoundingClientRect().top + window.pageYOffset;
                 if (self.animateScrollToAnchor) {
-                    self.scrollTo(document.body, element.offsetTop, this.options.scrollDuration);
+                    self.scrollTo(document.body, top, this.options.scrollDuration);
                 } else {
-                    self.scrollTo(document.body, element.offsetTop, 20);
+                    self.scrollTo(document.body, top, 20);
                 }
             } else {
                 console.warn("Element for offset not found (" + self.scrollToElement + ")");
@@ -1189,7 +1186,8 @@ var Swup = function () {
                         var element = document.querySelector(link.getHash());
                         if (element != null) {
                             if (this.options.scroll) {
-                                this.scrollTo(document.body, element.offsetTop, 320);
+                                var top = element.getBoundingClientRect().top + window.pageYOffset;
+                                this.scrollTo(document.body, top, 320);
                             }
                             history.replaceState(undefined, undefined, link.getHash());
                         } else {

diff --git a/dist/swup.min.js b/dist/swup.min.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "swup",
-  "version": "0.2.7",
+  "version": "0.2.8",
   "description": "Animated page transitions with css.",
   "main": "lib/index.js",
   "scripts": {

diff --git a/src/index.js b/src/index.js
@@ -220,7 +220,8 @@ export default class Swup {
                     var element = document.querySelector(link.getHash())
                     if (element != null) {
                         if (this.options.scroll) {
-                            this.scrollTo(document.body, element.offsetTop, 320)
+                            let top = element.getBoundingClientRect().top + window.pageYOffset;
+                            this.scrollTo(document.body, top, 320)
                         }
                         history.replaceState(undefined, undefined, link.getHash())
                     } else {

diff --git a/src/modules/doScrolling.js b/src/modules/doScrolling.js
@@ -5,10 +5,11 @@ module.exports = function (popstate) {
 
             var element = document.querySelector(self.scrollToElement)
             if (element != null) {
+                let top = element.getBoundingClientRect().top + window.pageYOffset;
                 if (self.animateScrollToAnchor) {
-                    self.scrollTo(document.body, element.offsetTop, this.options.scrollDuration)
+                    self.scrollTo(document.body, top, this.options.scrollDuration)
                 } else {
-                    self.scrollTo(document.body, element.offsetTop, 20)
+                    self.scrollTo(document.body, top, 20)
                 }
             } else {
                 console.warn(`Element for offset not found (${self.scrollToElement})`)