Documentation and demo updates.

kswedberg · Jul 31, 2016 · bf3b07c · bf3b07c
1 parent f0de324
commit bf3b07c
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 15 deletions.
diff --git a/.jscsrc b/.jscsrc
@@ -1,5 +1,4 @@
 {
-  "esnext": true,
   "requireCurlyBraces": [
     "if",
     "else",

diff --git a/demo/bbq.html b/demo/bbq.html
@@ -45,6 +45,10 @@ <h2>Smooth Scroll jQuery Plugin with Back Button Support</h2>
   </div>
   <script src="../lib/jquery/jquery.js"></script>
   <script src="../src/jquery.smooth-scroll.js"></script>
+  <script>
+  // Need this for "newer" versions of jQuery, which have removed $.browser
+  $.browser = $.browser || {msie: false};
+  </script>
   <script src="../lib/jquery.ba-bbq.js"></script>
   <script>
     $(document)

diff --git a/demo/hashchange.html b/demo/hashchange.html
@@ -15,6 +15,7 @@
       text-align: center;
     }
   </style>
+  <!--  ↓ Script down below ↓ -->
 </head>
 <body>
   <h2>Smooth Scroll jQuery Plugin with Back Button Support</h2>
@@ -46,24 +47,31 @@ <h2>Smooth Scroll jQuery Plugin with Back Button Support</h2>
   <script src="../lib/jquery/jquery.js"></script>
   <script src="../src/jquery.smooth-scroll.js"></script>
   <script>
+    // Bind the hashchange event listener
+    $(window).bind('hashchange', function(event) {
+      $.smoothScroll({
+        // Replace '#/' with '#' to go to the correct target
+        scrollTarget: location.hash.replace(/^\#\/?/, '#')
+      });
+    });
+
     $('a[href*="#"]')
     .bind('click', function(event) {
-      var hash = this.hash.replace(/[#<>]/g, '')
+      // Remove '#' from the hash.
+      var hash = this.hash.replace(/^#/, '')
 
-      if (this.pathname === location.pathname) {
+      if (this.pathname === location.pathname && hash) {
         event.preventDefault();
-      }
 
-      if (hash) {
+        // Change '#' (removed above) to '#/' so it doesn't jump without the smooth scrolling
         location.hash = '#/' + hash;
       }
-    })
-
-    $(window).bind('hashchange', function(event) {
-      $.smoothScroll({
-        scrollTarget: '#' + location.hash.replace(/^\#\/?/, '')
-      });
     });
+
+    // Trigger hashchange event on page load if there is a hash in the URL.
+    if (location.hash) {
+      $(window).trigger('hashchange');
+    }
   </script>
 
 </body>

diff --git a/readme.md b/readme.md
@@ -30,10 +30,9 @@ You can try a bare-bones demo at [kswedberg.github.io/jquery-smooth-scroll/demo/
 * Exclude links if they are within a containing element: `$('#container a').smoothScroll({excludeWithin: ['.container2']});`
 * Exclude links if they match certain conditions: `$('a').smoothScroll({exclude: ['.rough','#chunky']});`
 * Adjust where the scrolling stops: `$('.backtotop').smoothScroll({offset: -100});`
-* Add a callback function that is triggered before the scroll starts: `$('a').smoothScroll({beforeScroll: function() { alert('ready to go!'); }});
+* Add a callback function that is triggered before the scroll starts: `$('a').smoothScroll({beforeScroll: function() { alert('ready to go!'); }});`
 * Add a callback function that is triggered after the scroll is complete: `$('a').smoothScroll({afterScroll: function() { alert('we made it!'); }});`
-* Add back button support by including a history management plugin such as [Ben Alman's BBQ](http://benalman.com/code/projects/jquery-bbq/docs/files/jquery-ba-bbq-js.html). See [demo/bbq.html](demo/bbq.html) for an example of how to implement this.
-
+* Add back button support by using a [`hashchange` event listener](https://developer.mozilla.org/en-US/docs/Web/API/HashChangeEvent). You can also include a history management plugin such as [Ben Alman's BBQ](http://benalman.com/code/projects/jquery-bbq/docs/files/jquery-ba-bbq-js.html) for ancient browser support (IE &lt; 8), but you'll need jQuery 1.8 or earlier. See [demo/hashchange.html](demo/hashchange.html) or [demo/bbq.html](demo/bbq.html) for an example of how to implement.
 
 #### Options
 
@@ -49,7 +48,7 @@ The following options, shown with their default values, are available for both `
   // only use if you want to override default behavior
   scrollTarget: null,
 
-  // string to use as selector for event delegation (Requires jQuery >=1.4.2)
+  // string to use as selector for event delegation
   delegateSelector: null,
 
   // fn(opts) function to be called before scrolling occurs.
@@ -59,6 +58,9 @@ The following options, shown with their default values, are available for both `
   // fn(opts) function to be called after scrolling occurs.
   // `this` is the triggering element
   afterScroll: function() {},
+
+  // easing name. jQuery comes with "swing" and "linear." For others, you'll need an easing plugin
+  // from jQuery UI or elsewhere
   easing: 'swing',
 
   // speed can be a number or 'auto'

diff --git a/src/jquery.smooth-scroll.js b/src/jquery.smooth-scroll.js
@@ -27,7 +27,14 @@
     // fn(opts) function to be called after scrolling occurs.
     // `this` is the triggering element
     afterScroll: function() {},
+
+    // easing name. jQuery comes with "swing" and "linear." For others, you'll need an easing plugin
+    // from jQuery UI or elsewhere
     easing: 'swing',
+
+    // speed can be a number or 'auto'
+    // if 'auto', the speed will be calculated based on the formula:
+    // (current scroll position - target scroll position) / autoCoeffic
     speed: 400,
 
     // coefficient for "auto" speed