Permalink
Browse files

Documentation and demo updates.

  • Loading branch information...
kswedberg committed Jul 31, 2016
1 parent f0de324 commit bf3b07cb53c15d5f903219f303368ded4546d695
Showing with 35 additions and 15 deletions.
  1. +0 −1 .jscsrc
  2. +4 −0 demo/bbq.html
  3. +18 −10 demo/hashchange.html
  4. +6 −4 readme.md
  5. +7 −0 src/jquery.smooth-scroll.js
@@ -1,5 +1,4 @@
{
"esnext": true,
"requireCurlyBraces": [
"if",
"else",
@@ -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)
@@ -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>
@@ -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'
@@ -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

0 comments on commit bf3b07c

Please sign in to comment.