Added optional offset paramter

README.md

@@ -15,13 +15,14 @@ Just include smoothscroll inside your page, like this:
 
     <script type="text/javascript" src="path/to/smoothscroll.min.js"></script>
 
-All your internal links will be tied to a smooth scroll.
+All your internal links with the `scroll` class will be tied to a smooth scroll.
 If you want to call a smooth scroll from your code, you can now use the API by calling:
 
-`window.smoothScroll(target, duration, callback, context)`
+`window.smoothScroll(target, offset, duration, callback, context)`
 
 where:
 * `target` is a `HTMLElement Object` from your document that you want to scroll to, or a numeric position on the page
+* `offset` is the offset from where the scroll position ends in pixels (optional, defaults to 0)
 * `duration` is the total duration of the scroll (optional, defaults to 500ms)
 * `callback` is a function to be executed when the scrolling is over (optional)
 * `context` is the scrolling context (optional, defaults to window, can be any `HTMLElement Object`)
@@ -37,7 +38,7 @@ Example usage as a module, binding to a custom element:
 ```javascript
 var smoothScroll = require('smoothscroll');
 
-var exampleBtn = document.querySelector('.example-button');
+var exampleBtn = document.querySelector('.scroll.example-button');
 var exampleDestination = document.querySelector('.example-destination');
 
 // This function can easily be an onClick handler in React components
@@ -50,6 +51,24 @@ var handleClick = function(event) {
 exampleBtn.addEventListener('click', handleClick);
 ```
 
+Example usage binding to a custom element specifying offset and duration:
+
+```javascript
+var smoothScroll = require('smoothscroll');
+
+var exampleBtn = document.querySelector('.scroll.example-button');
+var exampleDestination = document.querySelector('.example-destination');
+
+var handleClick = function(event) {
+  event.preventDefault();
+
+  // This will scroll 100px above the exampleDestination element in 300 milliseconds
+  smoothScroll(exampleDestination, -100, 300);
+};
+
+exampleBtn.addEventListener('click', handleClick);
+```
+
 smoothscroll.js
 -
 Here are some indications if you want to tweak the code to fit your needs:

package.json

@@ -1,6 +1,6 @@
 {
   "name": "smoothscroll",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "A teeny tiny smooth scroll script with ease-in-out effect and no jQuery.",
   "main": "smoothscroll.js",
   "author": "Alice Lieutier <[email protected]> (http://alice.lieutier.me)",

smoothscroll.js

@@ -49,17 +49,19 @@ var position = function(start, end, elapsed, duration) {
 // we use requestAnimationFrame to be called by the browser before every repaint
 // if the first argument is an element then scroll to the top of this element
 // if the first argument is numeric then scroll to this location
+// if the second argument is numeric then offset the end position by this value
 // if the callback exist, it is called when the scrolling is finished
 // if context is set then scroll that element, else scroll window
-var smoothScroll = function(el, duration, callback, context){
+var smoothScroll = function(el, offset, duration, callback, context){
     duration = duration || 500;
+    offset = offset || 0;
     context = context || window;
     var start = context.scrollTop || window.pageYOffset;
 
     if (typeof el === 'number') {
-      var end = parseInt(el);
+      var end = parseInt(el) + offset;
     } else {
-      var end = getTop(el, start);
+      var end = getTop(el, start) + offset;
     }
 
     var clock = Date.now();
@@ -106,7 +108,7 @@ var linkHandler = function(ev) {
 
 // We look for all the internal links in the documents and attach the smoothscroll function
 document.addEventListener("DOMContentLoaded", function () {
-    var internal = document.querySelectorAll('a[href^="#"]:not([href="#"])'), a;
+    var internal = document.querySelectorAll('a.scroll[href^="#"]:not([href="#"])'), a;
     for(var i=internal.length; a=internal[--i];){
         a.addEventListener("click", linkHandler, false);
     }