forked from cferdinandi/smooth-scroll
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·132 lines (107 loc) · 4.68 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Smooth Scroll</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- stylesheets -->
<style type="text/css">
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-size: 112.5%;
margin-left: auto;
margin-right: auto;
max-width: 40em;
width: 88%;
}
</style>
</head>
<body>
<main id="top">
<nav>
<h1>Smooth Scroll</h1>
<p><a href="https://github.com/cferdinandi/smooth-scroll">GitHub</a></p>
<hr>
</nav>
<section>
<p>
<strong>Linear</strong><br>
<a data-easing="linear" href="#bazinga">Linear (no other options)</a><br>
</p>
<p>
<strong>Ease-In</strong><br>
<a data-easing="easeInQuad" href="#bazinga">Quad</a><br>
<a data-easing="easeInCubic" href="#bazinga">Cubic</a><br>
<a data-easing="easeInQuart" href="#bazinga">Quart</a><br>
<a data-easing="easeInQuint" href="#bazinga">Quint</a>
</p>
<p>
<strong>Ease-In-Out</strong><br>
<a data-easing="easeInOutQuad" href="#bazinga">Quad</a><br>
<a data-easing="easeInOutCubic" href="#bazinga">Cubic</a><br>
<a data-easing="easeInOutQuart" href="#bazinga">Quart</a><br>
<a data-easing="easeInOutQuint" href="#bazinga">Quint</a>
</p>
<p>
<strong>Ease-Out</strong><br>
<a data-easing="easeOutQuad" href="#bazinga">Quad</a><br>
<a data-easing="easeOutCubic" href="#bazinga">Cubic</a><br>
<a data-easing="easeOutQuart" href="#bazinga">Quart</a><br>
<a data-easing="easeOutQuint" href="#bazinga">Quint</a>
</p>
<p>
.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>
.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>
.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.
</p>
<p>
<strong>Non-ASCII Characters</strong><br>
<a href="#中文">中文</a>
</p>
<p>
.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>
.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>
.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.
</p>
<p id="中文">中文</p>
<p id="bazinga"><a href="#1@#%^-bottom">Bazinga!</a></p>
<p>
.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>
.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>
.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.
</p>
<p id="1@#%^-bottom"><a href="#top">Back to the top</a></p>
</section>
</main>
<!-- Javascript -->
<script src="dist/smooth-scroll.polyfills.js"></script>
<script>
// Instantiate Scrolls
var scroll = new SmoothScroll('a[href*="#"]:not([data-easing])');
if (document.querySelector('[data-easing]')) {
var linear = new SmoothScroll('[data-easing="linear"]', {easing: 'linear'});
var easeInQuad = new SmoothScroll('[data-easing="easeInQuad"]', {easing: 'easeInQuad'});
var easeInCubic = new SmoothScroll('[data-easing="easeInCubic"]', {easing: 'easeInCubic'});
var easeInQuart = new SmoothScroll('[data-easing="easeInQuart"]', {easing: 'easeInQuart'});
var easeInQuint = new SmoothScroll('[data-easing="easeInQuint"]', {easing: 'easeInQuint'});
var easeInOutQuad = new SmoothScroll('[data-easing="easeInOutQuad"]', {easing: 'easeInOutQuad'});
var easeInOutCubic = new SmoothScroll('[data-easing="easeInOutCubic"]', {easing: 'easeInOutCubic'});
var easeInOutQuart = new SmoothScroll('[data-easing="easeInOutQuart"]', {easing: 'easeInOutQuart'});
var easeInOutQuint = new SmoothScroll('[data-easing="easeInOutQuint"]', {easing: 'easeInOutQuint'});
var easeOutQuad = new SmoothScroll('[data-easing="easeOutQuad"]', {easing: 'easeOutQuad'});
var easeOutCubic = new SmoothScroll('[data-easing="easeOutCubic"]', {easing: 'easeOutCubic'});
var easeOutQuart = new SmoothScroll('[data-easing="easeOutQuart"]', {easing: 'easeOutQuart'});
var easeOutQuint = new SmoothScroll('[data-easing="easeOutQuint"]', {easing: 'easeOutQuint'});
}
// // Log scroll events
// var logScrollEvent = function (event) {
// console.log('type:', event.type);
// console.log('anchor:', event.detail.anchor);
// console.log('toggle:', event.detail.toggle);
// };
// document.addEventListener('scrollStart', logScrollEvent, false);
// document.addEventListener('scrollStop', logScrollEvent, false);
// document.addEventListener('scrollCancel', logScrollEvent, false);
</script>
</body>
</html>