adding

dist/css/demo.css

@@ -1 +1,30 @@
-.navbar{position:fixed;width:100%;text-align:center;background-color:#fff}.navbar li{display:inline-block;margin:0 .3em}.navbar li a{display:block;transition:all .1s ease-in-out}.navbar li.current a,.navbar li a:hover{transform:scale(1.3)}.section{padding:6em;line-height:1.8}
+.navbar {
+  position: fixed;
+  width: 100%;
+  text-align: center;
+  background-color: white;
+}
+
+.navbar li {
+  display: inline-block;
+  margin: 0 0.3em;
+}
+
+.navbar li a {
+  display: block;
+  transition: all 0.1s ease-in-out;
+}
+
+.navbar li a:hover {
+  transform: scale(1.3);
+}
+
+.navbar li.current a {
+  transform: scale(1.3);
+}
+
+.section {
+  padding: 6em;
+  line-height: 1.8;
+}
+

src/TinyOnePage.riot

@@ -9,14 +9,15 @@
 
         export default
         {
-
             /**
              *
              *
              */
             state:
             {
-
+                options: {
+                    offset: 100
+                }
             },
 
             /**
@@ -31,62 +32,90 @@
             },
 
             /**
-             *  setting innerHTML
+             *
              *
              *
              */
             onMounted()
             {
+                // adding content to wrapper
                 const wrapper = this.$('.tiny-one-page__inner');
                 wrapper.innerHTML = this.content;
 
-                // adding scroll smooth
+                // adding scroll smooth, get all elements with hash
                 this.scroll = new SmoothScroll('.tiny-one-page__inner a[href*="#"]', {
                     offset: function() {
-                        return 100;
+                        return this.state.options.offset;
                     }
                 });
 
                 window.addEventListener('scroll', this.handleScroll.bind(this), false);
 
                 if (window.location.hash) {
-                    this.$(".tiny-one-page__inner a[href$='" + window.location.hash + "']")
-                        .parentElement
-                        .classList
-                        .add('current');
+                    this.addClass(this.$(".tiny-one-page__inner a[href$='" + window.location.hash + "']"));
+                } else {
+                    this.addClass(this.$$(".tiny-one-page__inner a")[0]);
                 }
             },
 
+            /**
+             *
+             *  @param  {Object}  element
+             *  @return {Boolean}
+             */
             isVisible(element)
             {
-                return (
-                    ((element.offsetHeight + element.offsetTop) - this.options.offset) > window.pageYOffset
-                );
+                return ((element.offsetHeight + element.offsetTop) - this.state.options.offset) > window.pageYOffset;
             },
 
             /**
+             *  add css class to parent element
              *
-             *  @param  {[type]} event [description]
-             *  @return {[type]}       [description]
+             *  @param {Object} element
              */
-            handleScroll(event) {
+            addClass(element)
+            {
+                element
+                    .parentElement
+                    .classList
+                    .add('current');
+            },
 
+            /**
+             *  remove css class from parent element
+             *
+             *  @param  {Object} element
+             */
+            removeClass(element)
+            {
+                element
+                    .parentElement
+                    .classList
+                    .remove('current');
+            },
+
+            /**
+             *  handle scrolling,
+             *
+             *  @param  {Object} event
+             */
+            handleScroll(event)
+            {
                 // get elements
                 const elements = this.$$('.tiny-one-page__inner a');
 
                 // if found
                 let hasFound = false;
 
-                elements.forEach(function(index, target) {
+                elements.forEach(function(element, index) {
 
-                    // get element by hash
-                    const hash = target.hash;
+                    const target = document.querySelector(element.hash);
 
-                    if (this.isVisible(element, hash) && hasFound === false) {
-                        target.add('current');
+                    if (this.isVisible(target) && hasFound === false) {
+                        this.addClass(element);
                         hasFound = true;
                     } else {
-                        target.classList.remove('current');
+                        this.removeClass(element);
                     }
                 }.bind(this));
             }