Skip to content

Commit 6ac6cee

Browse files
kswedbergkswedberg
committed
Create gh-pages branch via GitHub
1 parent f65aa33 commit 6ac6cee

17 files changed

+642
-10526
lines changed

‎.gitignore

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎demo/bbq.html

Lines changed: 0 additions & 70 deletions
This file was deleted.

‎demo/index.html

Lines changed: 0 additions & 111 deletions
This file was deleted.

‎images/bg_hr.png

943 Bytes
Loading

‎images/blacktocat.png

1.39 KB
Loading

‎images/icon_download.png

1.13 KB
Loading

‎images/sprite_download.png

16.4 KB
Loading

‎index.html

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset='utf-8' />
6+
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
7+
<meta name="description" content="jQuery Smooth Scroll : Automatically make same-page links scroll smoothly" />
8+
9+
<link rel="stylesheet" type="text/css" media="screen" href="stylesheets/stylesheet.css">
10+
11+
<title>jQuery Smooth Scroll</title>
12+
</head>
13+
14+
<body>
15+
16+
<!-- HEADER -->
17+
<div id="header_wrap" class="outer">
18+
<header class="inner">
19+
<a id="forkme_banner" href="https://github.com/kswedberg/jquery-smooth-scroll">View on GitHub</a>
20+
21+
<h1 id="project_title">jQuery Smooth Scroll</h1>
22+
<h2 id="project_tagline">Automatically make same-page links scroll smoothly</h2>
23+
24+
<section id="downloads">
25+
<a class="zip_download_link" href="https://github.com/kswedberg/jquery-smooth-scroll/zipball/master">Download this project as a .zip file</a>
26+
<a class="tar_download_link" href="https://github.com/kswedberg/jquery-smooth-scroll/tarball/master">Download this project as a tar.gz file</a>
27+
</section>
28+
</header>
29+
</div>
30+
31+
<!-- MAIN CONTENT -->
32+
<div id="main_content_wrap" class="outer">
33+
<section id="main_content" class="inner">
34+
<h1>Smooth Scroll Plugin</h1>
35+
36+
<h2>Features</h2>
37+
38+
<h3>$.fn.smoothScroll</h3>
39+
40+
<ul>
41+
<li>Allows for easy implementation of smooth scrolling for same-page links.</li>
42+
<li>Works like this: <code>$('a').smoothScroll();</code>
43+
</li>
44+
<li>Specify a containing element if you want: <code>$('#container a').smoothScroll();</code>
45+
</li>
46+
<li>Exclude links if they are within a containing element: <code>$('#container a').smoothScroll({excludeWithin: ['.container2']});</code>
47+
</li>
48+
<li>Exclude links if they match certain conditions: <code>$('a').smoothScroll({exclude: ['.rough','#chunky']});</code>
49+
</li>
50+
<li>Adjust where the scrolling stops: <code>$('.backtotop').smoothScroll({offset: -100});</code>
51+
</li>
52+
<li>Add a callback function that is triggered after the scroll is complete: <code>$('a').smoothScroll({afterScroll: function() { alert('we made it!'); }});</code>
53+
</li>
54+
<li>Add back button support by including a history management plugin such as "Ben Alman's BBQ":<a href="http://benalman.com/code/projects/jquery-bbq/docs/files/jquery-ba-bbq-js.html">http://benalman.com/code/projects/jquery-bbq/docs/files/jquery-ba-bbq-js.html</a>. See demo/bbq.html for an example of how to implement this.</li>
55+
</ul><h4>Options</h4>
56+
57+
<p>The following options, shown with their default values, are available for both <code>$.fn.smoothScroll</code> and <code>$.smoothScroll</code>:</p>
58+
59+
<pre><code> {
60+
offset: 0,
61+
direction: 'top', // one of 'top' or 'left'
62+
scrollTarget: null, // only use if you want to override default behavior
63+
afterScroll: null, // function to be called after scrolling occurs. "this" is the triggering element
64+
easing: 'swing',
65+
speed: 400
66+
}
67+
</code></pre>
68+
69+
<p>The options map for <code>$.fn.smoothScroll</code> can take two additional properties: <code>exclude</code> and <code>excludeWithin</code>. The value for both of these is an array of selectors, DOM elements or jQuery objects. Default value for both is an empty array.</p>
70+
71+
<h3>$.smoothScroll</h3>
72+
73+
<ul>
74+
<li>Utility method works without a selector: <code>$.smoothScroll()</code>
75+
</li>
76+
<li>Can be used to scroll any element (not just <code>document.documentElement</code> / <code>document.body</code>)</li>
77+
<li>
78+
<p>Doesn't automatically fire, so you need to bind it to some other user interaction. For example:</p>
79+
80+
<pre><code>$('button.scrollsomething').click(function() {
81+
$.smoothScroll({
82+
scrollElement: $('div.scrollme'),
83+
scrollTarget: '#findme'
84+
});
85+
return false;
86+
});
87+
</code></pre>
88+
</li>
89+
<li>
90+
<p>The <code>$.smoothScroll</code> method can take one or two arguments.</p>
91+
92+
<ul>
93+
<li>If the first argument is a number, the document is scrolled to that position. If it's an options map, those options determine how the document (or other element) will be scrolled.</li>
94+
<li>If a number is provided as the second argument, it will override whatever may have been set for the <code>scrollTarget</code> option.</li>
95+
</ul>
96+
</li>
97+
</ul><h4>Additional Option</h4>
98+
99+
<p>The following option, in addition to those listed above, is available for <code>$.smoothScroll</code>:</p>
100+
101+
<pre><code>{
102+
// jQuery set of elements you wish to scroll.
103+
// if null (default), $('html, body').firstScrollable() is used.
104+
scrollElement: null,
105+
}
106+
</code></pre>
107+
108+
<h3>$.fn.scrollable</h3>
109+
110+
<ul>
111+
<li>Selects the matched element(s) that are scrollable. Acts just like a DOM traversal method such as <code>.find()</code> or <code>.next()</code>.</li>
112+
<li>The resulting jQuery set may consist of <strong>zero, one, or multiple</strong> elements.</li>
113+
</ul><h3>$.fn.firstScrollable</h3>
114+
115+
<ul>
116+
<li>Selects the first matched element that is scrollable. Acts just like a DOM traversal method such as <code>.find()</code> or <code>.next()</code>.</li>
117+
<li>The resulting jQuery set may consist of <strong>zero or one</strong> element.</li>
118+
<li>This method is used <em>internally</em> by the plugin to determine which element to use for "document" scrolling: <code>$('html, body').firstScrollable().animate({scrollTop: someNumber}, someSpeed)</code>
119+
</li>
120+
</ul><h2>Note</h2>
121+
122+
<ul>
123+
<li>The plugin's <code>$.fn.smoothScroll</code> and <code>$.smoothScroll</code> methods use the <code>$.fn.firstScrollable</code> DOM traversal method (also defined by this plugin) to determine which element is scrollable. If no elements are scrollable, these methods return a jQuery object containing an empty array, just like all of jQuery's other DOM traversal methods. Any further chained methods, therefore, will be called against no elements (which, in most cases, means that nothing will happen).</li>
124+
</ul>
125+
</section>
126+
</div>
127+
128+
<!-- FOOTER -->
129+
<div id="footer_wrap" class="outer">
130+
<footer class="inner">
131+
<p class="copyright">jQuery Smooth Scroll maintained by <a href="https://github.com/kswedberg">kswedberg</a></p>
132+
<p>Published with <a href="http://pages.github.com">GitHub Pages</a></p>
133+
</footer>
134+
</div>
135+
136+
137+
138+
</body>
139+
</html>

‎javascripts/main.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
console.log('This would be the main JS file.');

0 commit comments

Comments
 (0)