Skip to content

Commit cced664

Browse files
kswedbergkswedberg
committed
Add relative scroll to demo and general demo cleanup
1 parent fc48ff1 commit cced664

File tree

4 files changed

+244
-149
lines changed

4 files changed

+244
-149
lines changed

Diff for: ‎demo/bbq.html

+35-39
Original file line numberDiff line numberDiff line change
@@ -2,46 +2,40 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8">
5-
<title>Smooth Scroll jQuery Plugin Demo</title>
6-
<style type="text/css">
7-
body {
8-
font-family: "Helvetica Neue", Helvetica, sans-serif;
9-
}
10-
.container {
11-
margin: 40px auto;
12-
width: 200px;
13-
}
14-
h2 {
15-
text-align: center;
16-
}
17-
</style>
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>Smooth Scroll jQuery Plugin Demo - BBQ</title>
7+
<link rel="stylesheet" href="demo.css">
8+
<!-- ↓ Script down below ↓ -->
189
</head>
1910
<body>
20-
<h2>Smooth Scroll jQuery Plugin with Back Button Support</h2>
2111
<div class="container">
22-
<ul id="nav">
23-
<li><a href="#p1">p1</a></li>
24-
<li><a href="#p2">p2</a></li>
25-
<li><a href="#p3">p3</a></li>
26-
<li><a href="#p4">p4</a></li>
27-
<li><a href="#p5">p5</a></li>
28-
<li><a href="index.html#p5">index.html#p5</a> (goes to new page)</li>
29-
<li><a href="#">#</a></li>
3012

31-
<li><a href="#not-here">not-here</a></li>
32-
</ul>
33-
<p id="p1">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>
34-
<p id="p2">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>
35-
<a href="#nav">back to nav</a>
36-
<p id="p3">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>
37-
<a href="#nav">back to nav</a>
38-
<p id="p4">p4 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>
39-
<a href="#nav">back to nav</a>
40-
<p id="p5">p5 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>
41-
<a href="#nav">back to nav</a>
42-
<p id="p6">p6 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>
43-
<a href="#nav">back to nav</a>
13+
<h1>Smooth Scroll jQuery Plugin with Back Button Support</h1>
14+
<div class="demo-column">
15+
<ul id="nav">
16+
<li><a href="#p1">p1</a></li>
17+
<li><a href="#p2">p2</a></li>
18+
<li><a href="#p3">p3</a></li>
19+
<li><a href="#p4">p4</a></li>
20+
<li><a href="#p5">p5</a></li>
21+
<li><a href="index.html#p3">index.html#p3</a> (goes to new page)</li>
22+
<li><a href="#">#</a></li>
4423

24+
<li><a href="#not-here">not-here</a></li>
25+
</ul>
26+
<p id="p1">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>
27+
<p id="p2">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>
28+
<a href="#nav">back to nav</a>
29+
<p id="p3">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>
30+
<a href="#nav">back to nav</a>
31+
<p id="p4">p4 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>
32+
<a href="#nav">back to nav</a>
33+
<p id="p5">p5 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>
34+
<a href="#nav">back to nav</a>
35+
<p id="p6">p6 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>
36+
<a href="#nav">back to nav</a>
37+
38+
</div>
4539
</div>
4640
<script src="../lib/jquery/jquery.js"></script>
4741
<script src="../src/jquery.smooth-scroll.js"></script>
@@ -53,15 +47,17 @@ <h2>Smooth Scroll jQuery Plugin with Back Button Support</h2>
5347
<script>
5448
$(document)
5549
.on('click', 'a[href*="#"]', function() {
56-
if ( this.hash && this.pathname === location.pathname ) {
57-
$.bbq.pushState( '#/' + this.hash.slice(1) );
50+
if (this.hash && this.pathname === location.pathname) {
51+
$.bbq.pushState('#/' + this.hash.slice(1));
52+
5853
return false;
5954
}
6055
})
6156
.ready(function() {
6257
$(window).bind('hashchange', function(event) {
63-
var tgt = location.hash.replace(/^#\/?/,'');
64-
if ( document.getElementById(tgt) ) {
58+
var tgt = location.hash.replace(/^#\/?/, '');
59+
60+
if (document.getElementById(tgt)) {
6561
$.smoothScroll({scrollTarget: '#' + tgt});
6662
}
6763
});

Diff for: ‎demo/demo.css

+88
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
body {
2+
font-family: Helvetica, Arial, sans-serif;
3+
color: #353536;
4+
}
5+
h1 {
6+
margin-top: 0;
7+
text-align: center;
8+
font-size: 1.6em;
9+
}
10+
ul {
11+
padding-left: 1em;
12+
}
13+
.relative-scrollers {
14+
position: fixed;
15+
padding: 10px;
16+
top: 0;
17+
left: 0;
18+
box-shadow: 3px 3px 3px rgba(0, 0, 0, .2);
19+
background-color: #fff;
20+
background-color: rgba(255, 255, 255, 0.8);
21+
}
22+
.relative-scrollers > div {
23+
margin-bottom: 1em;
24+
}
25+
a {
26+
color: #0069d2;
27+
}
28+
button {
29+
background-color: #3399ff;
30+
color: #fff;
31+
border-width: 0;
32+
padding: 12px;
33+
width: 100%;
34+
}
35+
.container {
36+
margin: 0 auto 60px;
37+
max-width: 1100px;
38+
}
39+
.intro {
40+
margin: 0 140px;
41+
}
42+
.demo-column {
43+
margin: 0 auto 40px;
44+
width: 280px;
45+
padding: 0 140px;
46+
}
47+
.scrollme-wrapper {
48+
padding: 10px;
49+
background-color: #e3e3e3;
50+
}
51+
.scrollme {
52+
height: 100px;
53+
width: 180px;
54+
overflow: auto;
55+
padding-left: 8px;
56+
border: 1px solid #999;
57+
background-color: #fff;
58+
}
59+
.scrollme-x {
60+
width: 400px;
61+
}
62+
.scrollme-x div,
63+
.scrollme-x p {
64+
float: left;
65+
width: 180px;
66+
}
67+
@media (max-width: 560px) {
68+
.relative-scrollers {
69+
box-sizing: border-box;
70+
width: 100%;
71+
}
72+
.relative-scrollers > div {
73+
width: 49%;
74+
display: inline-block;
75+
}
76+
77+
.container {
78+
margin-top: 150px;
79+
}
80+
81+
.intro,
82+
.demo-column {
83+
margin-left: 0;
84+
margin-right: 0;
85+
padding-left: 10px;
86+
padding-right: 10px;
87+
}
88+
}

Diff for: ‎demo/hashchange.html

+30-35
Original file line numberDiff line numberDiff line change
@@ -2,47 +2,42 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8">
5-
<title>Smooth Scroll jQuery Plugin Demo</title>
6-
<style type="text/css">
7-
body {
8-
font-family: "Helvetica Neue", Helvetica, sans-serif;
9-
}
10-
.container {
11-
margin: 40px auto;
12-
width: 200px;
13-
}
14-
h2 {
15-
text-align: center;
16-
}
17-
</style>
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>Smooth Scroll jQuery Plugin Demo - hashchange</title>
7+
<link rel="stylesheet" href="demo.css">
188
<!-- ↓ Script down below ↓ -->
199
</head>
2010
<body>
21-
<h2>Smooth Scroll jQuery Plugin with Back Button Support</h2>
11+
12+
2213
<div class="container">
23-
<ul id="nav">
24-
<li><a href="#p1">p1</a></li>
25-
<li><a href="#p2">p2</a></li>
26-
<li><a href="#p3">p3</a></li>
27-
<li><a href="#p4">p4</a></li>
28-
<li><a href="#p5">p5</a></li>
29-
<li><a href="index.html#p5">index.html#p5</a> (goes to new page)</li>
30-
<li><a href="#">#</a></li>
14+
<h1>Smooth Scroll jQuery Plugin with Back Button Support</h1>
15+
<div class="demo-column">
16+
<p><em>Uses native hashchange DOM event</em></p>
17+
<ul id="nav">
18+
<li><a href="#p1">p1</a></li>
19+
<li><a href="#p2">p2</a></li>
20+
<li><a href="#p3">p3</a></li>
21+
<li><a href="#p4">p4</a></li>
22+
<li><a href="#p5">p5</a></li>
23+
<li><a href="index.html#p3">index.html#p3</a> (goes to new page)</li>
24+
<li><a href="#">#</a></li>
3125

32-
<li><a href="#not-here">not-here</a></li>
33-
</ul>
34-
<p id="p1">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>
35-
<p id="p2">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>
36-
<a href="#nav">back to nav</a>
37-
<p id="p3">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>
38-
<a href="#nav">back to nav</a>
39-
<p id="p4">p4 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>
40-
<a href="#nav">back to nav</a>
41-
<p id="p5">p5 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>
42-
<a href="#nav">back to nav</a>
43-
<p id="p6">p6 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>
44-
<a href="#nav">back to nav</a>
26+
<li><a href="#not-here">not-here</a></li>
27+
</ul>
28+
<p id="p1">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>
29+
<p id="p2">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>
30+
<a href="#nav">back to nav</a>
31+
<p id="p3">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>
32+
<a href="#nav">back to nav</a>
33+
<p id="p4">p4 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>
34+
<a href="#nav">back to nav</a>
35+
<p id="p5">p5 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>
36+
<a href="#nav">back to nav</a>
37+
<p id="p6">p6 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>
38+
<a href="#nav">back to nav</a>
4539

40+
</div>
4641
</div>
4742
<script src="../lib/jquery/jquery.js"></script>
4843
<script src="../src/jquery.smooth-scroll.js"></script>

0 commit comments

Comments
 (0)