Skip to content

Commit cdc5389

Browse files
author
Karl Swedberg
committed
updated demo and readme
1 parent 92f675c commit cdc5389

File tree

2 files changed

+67
-7
lines changed

2 files changed

+67
-7
lines changed

‎demo/index.html

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,12 @@
88
margin: 40px auto;
99
width: 200px;
1010
}
11+
.scrollme {
12+
height: 100px;
13+
overflow: auto;
14+
padding-left: 8px;
15+
border: 1px solid #999;
16+
}
1117
</style>
1218
<script src="http://code.jquery.com/jquery.js" type="text/javascript"></script>
1319
<script src="../jquery.smooth-scroll.js" type="text/javascript"></script>
@@ -18,19 +24,50 @@
1824
/* location.hash = this.hash; */
1925
}
2026
});
27+
28+
$('button.scrollsomething').click(function() {
29+
$.smoothScroll({
30+
scrollElement: $('div.scrollme'),
31+
scrollTarget: '#findme'
32+
});
33+
return false;
34+
});
2135
});
2236

2337
</script>
2438
</head>
2539
<body>
2640
<div class="container">
41+
<p>Scroll the Document to one of the following paragraphs:</p>
2742
<ul>
2843
<li><a href="#p1">p1</a></li>
2944
<li><a href="#p2">p2</a></li>
3045
<li><a href="#p3">p3</a></li>
3146
<li><a href="#p4">p4</a></li>
3247
<li><a href="#p5">p5</a></li>
3348
</ul>
49+
50+
<button class="scrollsomething">Scroll the next div</button>
51+
<div class="scrollme">
52+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
53+
</p>
54+
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
55+
</p>
56+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
57+
</p>
58+
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
59+
</p>
60+
<p id="findme">YOU FOUND ME! Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
61+
</p>
62+
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
63+
</p>
64+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
65+
</p>
66+
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
67+
</p>
68+
</div>
69+
70+
3471
<p id="p1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
3572
<p id="p2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
3673
<p id="p3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

‎readme.textile

Lines changed: 30 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,34 @@ h1. Smooth Scroll Plugin
22

33
h2. Features
44

5+
h3. $.fn.smoothScroll
6+
57
* Allows for easy implementation of smooth scrolling for same-page links.
6-
* Works like this: $('a').smoothScroll();
7-
* Specify a containing element if you want: $('#container a').smoothScroll();
8-
* Exclude links if they are within a containing element: $('#container a').smoothScroll({excludeWithin: ['.container2']});
9-
* Exclude links if they match certain conditions: $('a').smoothScroll({exclude: ['.rough','#chunky']});
10-
* Adjust where the scrolling stops: $('.backtotop').smoothScroll({offset: -100});
11-
* Add a callback function that is triggered after the scroll is complete: $('a').smoothScroll({afterScroll: function() { window.location.hash = this.hash; }});
12-
* Add back button support by including a history management plugin such as Ben Alman's BBQ. See demo/bbq.html for an example of how to implement this.
8+
* Works like this: <code>$('a').smoothScroll();</code>
9+
* Specify a containing element if you want: <code>$('#container a').smoothScroll();</code>
10+
* Exclude links if they are within a containing element: <code>$('#container a').smoothScroll({excludeWithin: ['.container2']});</code>
11+
* Exclude links if they match certain conditions: <code>$('a').smoothScroll({exclude: ['.rough','#chunky']});</code>
12+
* Adjust where the scrolling stops: <code>$('.backtotop').smoothScroll({offset: -100});</code>
13+
* Add a callback function that is triggered after the scroll is complete: <code>$('a').smoothScroll({afterScroll: function() { alert('we made it!'); }});</code>
14+
* 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 for an example of how to implement this.
15+
16+
h3. $.smoothScroll
17+
18+
* Utility method works without a selector: <code>$.smoothScroll()</code>
19+
* Can be used to scroll any element (not just <code>document.documentElement</code> / <code>document.body</code>)
20+
* Doesn't automatically fire, so you need to bind it to some other user interaction. For example:
21+
22+
<pre><code>
23+
$('button.scrollsomething').click(function() {
24+
$.smoothScroll({
25+
scrollElement: $('div.scrollme'),
26+
scrollTarget: '#findme'
27+
});
28+
return false;
29+
});
30+
</code></pre>
31+
32+
h3. $.fn.scrollable
33+
34+
* Selects the first matched element that is scrollable. Acts just like a DOM traversal method such as .find() or .next().
35+
* This method is used internally by the plugin to determine which element to use for "document" scrolling: <code>$('html, body').scrollable().animate({scrollTop: someNumber}, someSpeed)</code>

0 commit comments

Comments
 (0)