update README and adjusting sample page

leoalv · Aug 28, 2017 · b117f2a · b117f2a
1 parent 3ea0dcc
commit b117f2a
Show file tree

Hide file tree

Showing 2 changed files with 88 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -1,3 +1,88 @@
 # VanillaJS ScrollSpy
 
 ScrollSpy in pure JavaScript
+
+## How to use
+
+``` javascript
+scrollSpy(menu, speed, easing);
+```
+
+- **menu:** menu selector (#id, .class, ...)
+- **speed (optional):** scroll speed, default value `1500`
+- **easing (optional):** scroll type `'easeOutSine'`, `'easeInOutSine'` or `'easeInOutQuint'`, default value `'easeInOutQuint'`
+
+## Examples
+
+### Basic template
+
+``` html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>VanillaJS ScrollSpy</title>
+</head>
+
+<body>
+  <header class="header">
+    <div class="container">
+      <nav class="navbar">
+        <ul>
+          <li><a class="active" href="#home" title="Home">Home</a></li>
+          <li><a href="#portfolio" title="Portfolio">Portfolio</a></li>
+          <li><a href="#about" title="About">About</a></li>
+          <li><a href="#contact" title="Contact">Contact</a></li>
+        </ul>
+      </nav>
+    </div>
+  </header>
+
+  <section id="home" class="page">
+    <div class="container">
+      <h2>Home</h2>
+    </div>
+  </section>
+
+  <section id="portfolio" class="page">
+    <div class="container">
+      <h2>Portfolio</h2>
+    </div>
+  </section>
+
+  <section id="about" class="page">
+    <div class="container">
+      <h2>About</h2>
+    </div>
+  </section>
+
+  <section id="contact" class="page">
+    <div class="container">
+      <h2>Contact</h2>
+    </div>
+  </section>
+
+	<script src="src/js/scrollspy.js"></script>
+
+  <script>
+    var menu = document.querySelector('.navbar');
+    scrollSpy(menu);
+  </script>
+</body>
+</html>
+```
+
+### Controlling the speed
+Choose a number greater than or equal to 1.
+
+``` javascript
+var menu = document.querySelector('.navbar');
+scrollSpy(menu, 2000);
+```
+
+### Changing scroll type
+
+``` javascript
+var menu = document.querySelector('.navbar');
+scrollSpy(menu, 2000, 'easeOutSine');
+```
diff --git a/sample.html b/sample.html
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
 	<meta charset="UTF-8">
-	<title>ScrollSpy</title>
+	<title>VanillaJS ScrollSpy</title>
 	<style>
     * {
       margin: 0;
@@ -100,10 +100,10 @@ <h2>Contact</h2>
     </div>
   </section>
 
-	<script src="src/js/scrollspy.js"></script>
+	<script src="dist/js/scrollspy.min.js"></script>
   <script>
     var menu = document.querySelector('.navbar');
-    scrollSpy(menu);
+    scrollSpy(menu, 1);
   </script>
 </body>
 </html>