diff --git a/src/modules/hash.js b/src/modules/hash.js
index 6aee80d..426bd6c 100644
--- a/src/modules/hash.js
+++ b/src/modules/hash.js
@@ -1,7 +1,32 @@
 const HASH = '#slide';
 const slideRegex = /#slide=(\d+)/;
 
+/**
+ * Static class with methods to manipulate and extract infro from the hash of
+ * the URL.
+ */
 export default class Hash {
+  /**
+   * Listens to the hashchange event and reacts to it by making the
+   * WebSlide instance navigate to the needed slide.
+   * @param {WebSlides} wsInstance
+   */
+  static init(wsInstance) {
+    window.addEventListener('hashchange', () => {
+      const newSlideIndex = Hash.getSlideNumber();
+
+      if (newSlideIndex !== null) {
+        wsInstance.goToSlide(newSlideIndex);
+      }
+    }, false);
+  }
+
+  /**
+   * Gets the slide number from the hash by a regex matching `#slide=` and gets
+   * the number after it. If the number is invalid or less than 0, it will
+   * return null as an invalid value.
+   * @return {?number}
+   */
   static getSlideNumber() {
     let results = document.location.hash.match(slideRegex);
     let slide = 0;
@@ -19,7 +44,16 @@ export default class Hash {
     return slide;
   }
 
+  /**
+   * It will update the hash (if it's different) so it reflects the slide
+   * number being visible.
+   * @param {number} number The number of the slide we're transitioning to.
+   */
   static setSlideNumber(number) {
-    history.pushState(null, `Slide ${number}`, `${HASH}=${number}`);
+    if (Hash.getSlideNumber() !== (number - 1)) {
+      history.pushState({
+        slideI: number - 1
+      }, `Slide ${number}`, `${HASH}=${number}`);
+    }
   }
 }
diff --git a/src/utils/dom.js b/src/utils/dom.js
index 4caa078..9fb5ef4 100644
--- a/src/utils/dom.js
+++ b/src/utils/dom.js
@@ -1,5 +1,17 @@
+/**
+ * Static class for DOM helper.
+ */
 export default class DOM {
-  static createNode(tag, id = '', text = null) {
+  /**
+   * Creates a node with optional parameters.
+   * @param {string} tag The name of the tag of the needed element.
+   * @param {string} id The desired id for the element. It defaults to an
+   * empty string.
+   * @param {string} text The desired text to go inside of the element. It defaults
+   * to an empty string.
+   * @return {Element}
+   */
+  static createNode(tag, id = '', text = '') {
     const node = document.createElement(tag);
     node.id = id;
 
@@ -10,18 +22,35 @@ export default class DOM {
     return node;
   }
 
+  /**
+   * Hides an element setting the display to none.
+   * @param {Element} el Element to be hidden.
+   */
   static hide(el) {
     el.style.display = 'none';
   }
 
+  /**
+   * Shows an element by removing the display property. This is only intended
+   * to be used in conjunction with DOM.hide.
+   * @param {Element} el Element to be shown.
+   */
   static show(el) {
     el.style.display = '';
   }
 
+  /**
+   * Locks the scroll on the document by setting the HTML to have a hidden
+   * overflow.
+   */
   static lockScroll() {
     document.documentElement.style.overflow = 'hidden';
   }
 
+  /**
+   * Unlocks the scroll on the document by setting the HTML to have an auto
+   * overflow.
+   */
   static unlockScroll() {
     document.documentElement.style.overflow = 'auto';
   }