forked from Stanko/animated-scroll-to
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
263 lines (240 loc) · 8.93 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
<title>Animated window scroll to</title>
<style>
body {
margin: 0;
padding: 0;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: #111;
font-size: 18px;
}
h1,
h2,
h3 {
font-weight: normal;
margin: 1.5em 0;
}
h1 {
margin-top: 15px;
}
p {
line-height: 1.4em;
color: #555;
}
a,
a:active,
a:visited,
a:focus {
color: #bD2828;
}
a:hover {
color: #841010;
}
.Buttons {
padding: 5px 20px;
position: fixed;
width: 100%;
top: 0;
left: 0;
border-bottom: 1px solid #ddd;
background: #FAFAFA;
}
.Buttons span {
display: inline-block;
position: relative;
top: 1px;
margin-right: 5px;
}
button {
height: 25px;
border: 1px solid #ddd;
background: #fff;
border-radius: 12px;
padding: 0 10px
}
button:hover {
border-color: #aaa;
cursor: pointer;
}
.Page {
min-height: 1500px;
background: #FAFAFA;
}
.Page--withText {
line-height: 1500px;
font-size: 100px;
text-align: center;
background: #234;
background: -webkit-linear-gradient(top, #fff 0%, #ddd 100%);
background: -moz-linear-gradient(top, #fff 0%, #ddd 100%);
background: linear-gradient(to bottom, #fff 0%, #ddd 100%);
}
.Page--withElement {
display: flex;
justify-content: center;
align-items: center;
font-size: 46px;
min-height: 100vh !important ;
}
.Container {
padding: 70px 20px 50px;
max-width: 800px;
margin: 0 auto;
}
.ElementDemo {
height: 200px;
overflow-y: auto;
color: #222;
background: #ffffff;
padding: 0 20px;
border-radius: 4px;
margin-top: 20px;
border: 1px solid #ddd;
}
pre {
color: #fff;
background: #333537;
padding: 20px;
border-radius: 4px;
font-size: 16px;
overflow-x: auto;
}
.Links a {
display: inline-block;
margin-right: 10px;
}
.Grey { color: #aaa; }
.Green { color: #A6E22E; }
.Purple { color: #A97EF8; }
.Yellow { color: #E6DB74; }
</style>
<script src="animated-scroll-to.js"></script>
</head>
<body>
<div class="Buttons">
<span>Scroll to</span>
<button onclick="animateScrollTo(0)">0</button>
<button onclick="animateScrollTo(100)">100</button>
<button onclick="animateScrollTo(1500)">1500</button>
<button onclick="animateScrollTo(6000)">6k</button>
<button onclick="animateScrollTo(20000)">20k</button>
<button onclick="animateScrollTo(document.querySelector('.Page--withElement'))">To element</button>
</div>
<div class="Page">
<div class="Container">
<div class="Links">
<a href="https://stanko.github.io/">My Blog</a>
<a href="https://github.com/Stanko/animated-scroll-to">
GitHub
</a>
<a href="https://www.npmjs.com/package/animated-scroll-to">
npm
</a>
</div>
<h1>Animated JavaScript window and element scrollTo</h1>
<p>
Documentation on <a href="https://github.com/Stanko/animated-scroll-to">GitHub</a>.
Install it from npm, or grab javascipt file from GitHub (not recommended).
</p>
<pre>npm install animated-scroll-to</pre>
<h3>What is this?</h3>
<p>
This is a plain JavaScript animated scroll to function.
It has easing, and accepts speed per 1000px rather than duration.
Then function recalculates the duration,
and sets the minimum of 250ms or maximum of 3000ms.
If you give it offset which is larger from the maximum scroll value, it will use latter.
Also it disables user scrolling while scroll animation is in progress.
</p>
<h3>Demo</h3>
<b>Window</b>
<p>Use buttons at the top of the page to scroll window</p>
<b>Custom DOM element</b>
<p>Use buttons beneath to scroll element</p>
<button onclick="animateScrollTo(0, { element: document.querySelector('.ElementDemo') })">0</button>
<button onclick="animateScrollTo(100, { element: document.querySelector('.ElementDemo') })">100</button>
<button onclick="animateScrollTo(200, { element: document.querySelector('.ElementDemo') })">200</button>
<button onclick="animateScrollTo(500, { element: document.querySelector('.ElementDemo') })">500</button>
<button onclick="animateScrollTo(1000, { element: document.querySelector('.ElementDemo') })">1000</button>
<div class="ElementDemo">
<p>Use buttons above to scroll this element</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nullam facilisis feugiat leo vel tempor. Nullam mollis tortor quis
fringilla ultricies. Vivamus eu libero malesuada orci sagittis
feugiat. Nulla cursus tempor velit, vitae pellentesque ex placerat
faucibus. Fusce elementum ante eget nulla condimentum, non efficitur
erat venenatis. Aliquam nunc diam, tincidunt eget arcu sed, feugiat
laoreet dolor. Nulla in laoreet odio. Ut nec egestas enim. Nam
vestibulum pretium laoreet. Nam magna magna, dignissim volutpat augue
non, imperdiet feugiat odio.
</p>
<p>
Vivamus suscipit fermentum lorem, sit amet lacinia ex accumsan nec.
Vivamus iaculis, neque sed auctor congue, risus ipsum laoreet odio,
eu mollis dolor justo elementum dui. Praesent facilisis eleifend
mattis. Aliquam ut erat dictum, aliquet ligula et, commodo felis.
Nullam non venenatis lorem. Donec consectetur lectus a consectetur
porta. Phasellus vel commodo tellus. Donec egestas rutrum semper.
</p>
<p>
Suspendisse ac luctus velit. Proin nunc erat, placerat sit amet
consectetur nec, dictum sit amet velit. Nulla semper nibh sit amet
sem fermentum, pretium placerat augue rutrum. Proin tellus lorem,
sodales nec lacus eu, auctor euismod neque. Praesent rutrum elit eu
magna pulvinar, quis hendrerit tortor dapibus. Etiam fringilla
molestie dui ut suscipit. Aenean quam nisl, imperdiet nec egestas
sed, congue eu orci. Cras vehicula auctor diam at sodales.
Nulla blandit faucibus ex, id lacinia neque ornare vitae.
Pellentesque a felis neque.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nullam facilisis feugiat leo vel tempor. Nullam mollis tortor quis
fringilla ultricies. Vivamus eu libero malesuada orci sagittis
feugiat. Nulla cursus tempor velit, vitae pellentesque ex placerat
faucibus. Fusce elementum ante eget nulla condimentum, non efficitur
erat venenatis. Aliquam nunc diam, tincidunt eget arcu sed, feugiat
laoreet dolor. Nulla in laoreet odio. Ut nec egestas enim. Nam
vestibulum pretium laoreet. Nam magna magna, dignissim volutpat augue
non, imperdiet feugiat odio.
</p>
<p>
Vivamus suscipit fermentum lorem, sit amet lacinia ex accumsan nec.
Vivamus iaculis, neque sed auctor congue, risus ipsum laoreet odio,
eu mollis dolor justo elementum dui. Praesent facilisis eleifend
mattis. Aliquam ut erat dictum, aliquet ligula et, commodo felis.
Nullam non venenatis lorem. Donec consectetur lectus a consectetur
porta. Phasellus vel commodo tellus. Donec egestas rutrum semper.
</p>
<p>
Suspendisse ac luctus velit. Proin nunc erat, placerat sit amet
consectetur nec, dictum sit amet velit. Nulla semper nibh sit amet
sem fermentum, pretium placerat augue rutrum. Proin tellus lorem,
sodales nec lacus eu, auctor euismod neque. Praesent rutrum elit eu
magna pulvinar, quis hendrerit tortor dapibus. Etiam fringilla
molestie dui ut suscipit. Aenean quam nisl, imperdiet nec egestas
sed, congue eu orci. Cras vehicula auctor diam at sodales.
Nulla blandit faucibus ex, id lacinia neque ornare vitae.
Pellentesque a felis neque.
</p>
</div>
</div>
</div>
<div class="Page Page--withText">1</div>
<div class="Page Page--withText">2</div>
<div class="Page Page--withText">3</div>
<div class="Page Page--withText">4</div>
<div class="Page Page--withText">5</div>
<div class="Page Page--withText">6</div>
<div class="Page Page--withElement">Page with element</div>
<div class="Page Page--withText">7</div>
<div class="Page Page--withText">8</div>
<div class="Page Page--withText">9</div>
</body>
</html>