✨ Site > Add scroll

site/index.html

@@ -42,10 +42,10 @@
 
             <div class="background"></div>
 
-            <header class="navigation js-navigation">
-                <a class="item underline features js-navigation-item" href="#features">Features</a>
-                <a class="item underline get-started js-navigation-item" href="#get-started">Get started</a>
-                <a class="item underline whos-using-it js-navigation-item" href="#whos-using-it">Who's using it?</a>
+            <header class="navigation">
+                <a class="item underline features js-scroll-item" href="#features">Features</a>
+                <a class="item underline get-started js-scroll-item" href="#get-started">Get started</a>
+                <a class="item underline whos-using-it js-scroll-item" href="#whos-using-it">Who's using it?</a>
                 <a class="item underline github" href="https://github.com/brunosimon/keppler" target="_blank"></a>
             </header>
 
@@ -65,14 +65,14 @@
                 </div>
             </div>
 
-            <a class="get-started-button js-navigation-item" href="#get-started">
+            <a class="get-started-button js-scroll-item" href="#get-started">
                 <span class="out">Get started</span>
                 <span class="hover">
                     <span class="inner">Get started</span>
                 </span>
             </a>
 
-            <a class="scroll-button js-navigation-item" href="features">
+            <a class="scroll-button js-scroll-item" href="#features">
                 <span class="mouse">
                     <span class="wheel"></span>
                 </span>
@@ -230,9 +230,9 @@
                 <div class="lists">
                     <ul class="list">
                         <li class="title">Keppler</li>
-                        <li class="item"><a class="underline features js-navigation-item" href="#features">Features</a></li>
-                        <li class="item"><a class="underline get-started js-navigation-item" href="#get-started">Get started</a></li>
-                        <li class="item"><a class="underline whos-using-it js-navigation-item" href="#whos-using-it">Who's using it?</a></li>
+                        <li class="item"><a class="underline features js-scroll-item" href="#features">Features</a></li>
+                        <li class="item"><a class="underline get-started js-scroll-item" href="#get-started">Get started</a></li>
+                        <li class="item"><a class="underline whos-using-it js-scroll-item" href="#whos-using-it">Who's using it?</a></li>
                     </ul>
 
                     <ul class="list">

site/src/javascript/Scroll.js

@@ -0,0 +1,81 @@
+export default class Scroll
+{
+    constructor()
+    {
+        this.parse()
+    }
+
+    /**
+     * Search and set js-scroll-item elements
+     * @param {Element} _$element Target element to parse
+     */
+    parse(_$element = null)
+    {
+        const $element = _$element || document
+        const $items = $element.querySelectorAll('.js-scroll-item:not(.scroll-item-set)')
+
+        for(const $item of $items)
+        {
+            this.setItem($item)
+        }
+    }
+
+    setItem($item)
+    {
+        $item.addEventListener('click', (event) =>
+        {
+            event.preventDefault()
+
+            const href = $item.getAttribute('href')
+            const $element = document.querySelector(href)
+
+            if($element)
+            {
+                this.scrollTo($element.offsetTop)
+            }
+        })
+    }
+
+    /**
+     * Scroll to value with transition
+     * @param {Number} scrollTargetY Scroll value
+     * @param {Number} speed Speed
+     */
+    scrollTo(scrollTargetY = 0, speed = 2000)
+    {
+        // Set up
+        const scrollY = window.scrollY || document.documentElement.scrollTop
+        let currentTime = 0
+        const time = Math.max(.1, Math.min(Math.abs(scrollY - scrollTargetY) / speed, .8))
+
+        // EaseInOutQuint
+        const easeInOutQuint = (pos) =>
+        {
+            if ((pos /= 0.5) < 1) {
+                return 0.5 * Math.pow(pos, 5);
+            }
+            return 0.5 * (Math.pow((pos - 2), 5) + 2);
+        }
+
+        // Tick
+        const tick = () =>
+        {
+            currentTime += 1 / 60
+
+            const p = currentTime / time
+            const t = easeInOutQuint(p)
+
+            if(p < 1)
+            {
+                window.requestAnimationFrame(tick)
+                window.scrollTo(0, scrollY + ((scrollTargetY - scrollY) * t))
+            }
+            else
+            {
+                window.scrollTo(0, scrollTargetY)
+            }
+        }
+
+        tick()
+    }
+}

site/src/javascript/index.js

@@ -1,9 +1,11 @@
 import Demo from './Demo.js'
+import Scroll from './Scroll.js'
 
 export default class Site
 {
     constructor()
     {
         this.demo = new Demo()
+        this.scroll = new Scroll()
     }
 }