From 088ff80df18c36a06a1193558aaa3dc0b0277d26 Mon Sep 17 00:00:00 2001
From: ErickSkrauch <erickskrauch@yandex.ru>
Date: Sat, 28 Jan 2017 21:07:57 +0300
Subject: [PATCH] =?UTF-8?q?=D0=98=D1=81=D0=BF=D1=80=D0=B0=D0=B2=D0=BB?=
 =?UTF-8?q?=D0=B5=D0=BD=20=D1=84=D1=83=D0=BD=D0=BA=D1=86=D0=B8=D0=BE=D0=BD?=
 =?UTF-8?q?=D0=B0=D0=BB=20scrollTo,=20=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB?=
 =?UTF-8?q?=D0=B5=D0=BD=D0=B0=20=D0=BE=D0=B1=D1=80=D0=B0=D0=B1=D0=BE=D1=82?=
 =?UTF-8?q?=D0=BA=D0=B0=20=D1=81=D0=B8=D1=82=D1=83=D0=B0=D1=86=D0=B8=D0=B8?=
 =?UTF-8?q?,=20=D0=BA=D0=BE=D0=B3=D0=B4=D0=B0=20=D0=BA=D0=BE=D0=BD=D1=82?=
 =?UTF-8?q?=D0=B5=D0=BD=D1=82=20=D0=BD=D0=B0=D1=85=D0=BE=D0=B4=D0=B8=D1=82?=
 =?UTF-8?q?=D1=81=D1=8F=20=D0=BD=D0=B8=D0=B6=D0=B5=20=D0=BC=D0=B8=D0=BD?=
 =?UTF-8?q?=D0=B8=D0=BC=D0=B0=D0=BB=D1=8C=D0=BD=D0=BE=D0=B3=D0=BE=20=D0=BF?=
 =?UTF-8?q?=D0=BE=D0=BB=D0=BE=D0=B6=D0=B5=D0=BD=D0=B8=D1=8F=20=D0=BE=D0=BA?=
 =?UTF-8?q?=D0=BD=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ui/scrollTo.js | 18 +++++++++++-------
 src/functions.js              | 10 ++++++++++
 src/index.js                  | 13 ++++++++-----
 3 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/src/components/ui/scrollTo.js b/src/components/ui/scrollTo.js
index 25092f9..1c3825e 100644
--- a/src/components/ui/scrollTo.js
+++ b/src/components/ui/scrollTo.js
@@ -4,15 +4,20 @@
  * @see http://ariya.ofilabs.com/2013/11/javascript-kinetic-scrolling-part-2.html
  */
 
-import { rAF } from 'functions';
+import { rAF, getScrollTop } from 'functions';
 
-const TIME_CONSTANT = 100; // heigher numbers - slower animation
-export default function scrollTo(y, viewPort) {
+const TIME_CONSTANT = 100; // higher numbers - slower animation
+export function scrollTo(y) {
     const start = Date.now();
     let scrollWasTouched = false;
     rAF(() => { // wrap in rAF to optimize initial reading of scrollTop
-        const {scrollTop} = viewPort;
-        const amplitude = y - scrollTop;
+        const contentHeight = document.documentElement.scrollHeight;
+        const windowHeight = window.innerHeight;
+        if (contentHeight < y + windowHeight) {
+            y = contentHeight - windowHeight;
+        }
+
+        const amplitude = y - getScrollTop();
 
         (function animateScroll() {
             const elapsed = Date.now() - start;
@@ -32,7 +37,7 @@ export default function scrollTo(y, viewPort) {
             }
 
             const newScrollTop = y + delta;
-            viewPort.scrollTop = newScrollTop;
+            window.scrollTo(0, newScrollTop);
         }());
     });
 
@@ -42,4 +47,3 @@ export default function scrollTo(y, viewPort) {
         scrollWasTouched = true;
     }
 }
-
diff --git a/src/functions.js b/src/functions.js
index 5f8ac8b..2759246 100644
--- a/src/functions.js
+++ b/src/functions.js
@@ -82,3 +82,13 @@ export function getJwtPayload(jwt) {
         throw new Error('Can not decode jwt token');
     }
 }
+
+/**
+ * http://stackoverflow.com/a/3464890/5184751
+ *
+ * @return {number}
+ */
+export function getScrollTop() {
+    const doc = document.documentElement;
+    return (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
+}
diff --git a/src/index.js b/src/index.js
index 3166b6e..5dfe827 100644
--- a/src/index.js
+++ b/src/index.js
@@ -50,16 +50,20 @@ function stopLoading() {
     loader.hide();
 }
 
-import scrollTo from 'components/ui/scrollTo';
+import { scrollTo } from 'components/ui/scrollTo';
+import { getScrollTop } from 'functions';
 const SCROLL_ANCHOR_OFFSET = 80; // 50 + 30 (header height + some spacing)
+// Первый скролл выполняется сразу после загрузки страницы, так что чтобы снизить
+// нагрузку на рендеринг мы откладываем первый скрол на 200ms
+let isFirstScroll = true;
 /**
  * Scrolls to page's top or #anchor link, if any
  */
 function restoreScroll() {
     const {hash} = location;
 
-    // Push onto callback queue so it runs after the DOM is updated
     setTimeout(() => {
+        isFirstScroll = false;
         const id = hash.replace('#', '');
         const el = id ? document.getElementById(id) : null;
         const viewPort = document.body;
@@ -71,14 +75,13 @@ function restoreScroll() {
 
         let y = 0;
         if (el) {
-            const {scrollTop} = viewPort;
             const {top} = el.getBoundingClientRect();
 
-            y = scrollTop + top - SCROLL_ANCHOR_OFFSET;
+            y = getScrollTop() + top - SCROLL_ANCHOR_OFFSET;
         }
 
         scrollTo(y, viewPort);
-    }, 200);
+    }, isFirstScroll ? 200 : 0);
 }
 
 import { loadScript, debounce } from 'functions';