-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
191 lines (191 loc) · 14.5 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Scrolltopable</title>
<script type="module" src="index.min.js"></script>
<link rel="stylesheet" type="text/css" href="basic.css"/>
<link rel="stylesheet" href="github-markdown.css"/>
<style>
.markdown-body {
box-sizing: border-box;
min-width: 200px;
max-width: 980px;
margin: 0 auto;
padding: 45px;
}
@media (max-width: 767px) {
.markdown-body {
padding: 15px;
}
}
</style>
<script type="module">
import { Scrolltopable } from './index.min.js'
Scrolltopable.init({})
</script>
</head>
<body class="markdown-body">
<p><img src="https://img.shields.io/github/workflow/status/internetguru/scrolltopable/Build" alt="GitHub Workflow Status" /> <img src="https://img.shields.io/github/license/internetguru/scrolltopable" alt="GitHub" /> <a href="https://www.npmjs.com/package/@internetguru/scrolltopable"><img src="https://img.shields.io/npm/v/@internetguru/scrolltopable" alt="npm" /></a> <embed src="https://img.shields.io/github/size/internetguru/scrolltopable/index.min.js?label=minified%20size" /></p>
<h1 id="scrolltopable">Scrolltopable</h1>
<blockquote>
<p>Scrolltopable is a JavaScript module that provides <strong>ultimate scroll-to-top</strong> functionality. <strong>No dependencies and frameworks</strong>, pure JavaScript!</p>
</blockquote>
<p><a href="https://internetguru.github.io/scrolltopable/">See our demo</a>.</p>
<h2 id="simple-usage">Simple Usage</h2>
<div class="sourceCode" id="cb1"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb1-1"><a href="#cb1-1"></a><span class="kw"><head></span></span>
<span id="cb1-2"><a href="#cb1-2"></a> <span class="co"><!-- include basic css --></span></span>
<span id="cb1-3"><a href="#cb1-3"></a> <span class="kw"><link</span><span class="ot"> rel=</span><span class="st">"stylesheet"</span><span class="ot"> type=</span><span class="st">"text/css"</span><span class="ot"> href=</span><span class="st">"https://unpkg.com/@internetguru/scrolltopable@latest/basic.css"</span><span class="kw">/></span></span>
<span id="cb1-4"><a href="#cb1-4"></a> <span class="co"><!-- include scrolltopable --></span></span>
<span id="cb1-5"><a href="#cb1-5"></a> <span class="kw"><script</span><span class="ot"> type=</span><span class="st">"module"</span><span class="ot"> src=</span><span class="st">"https://unpkg.com/@internetguru/scrolltopable@latest/index.min.js"</span><span class="kw">></script></span></span>
<span id="cb1-6"><a href="#cb1-6"></a> <span class="co"><!-- initialization with modifying default options --></span></span>
<span id="cb1-7"><a href="#cb1-7"></a> <span class="kw"><script</span><span class="ot"> type=</span><span class="st">"module"</span><span class="kw">></span></span>
<span id="cb1-8"><a href="#cb1-8"></a> <span class="im">import</span> <span class="op">{</span> Scrolltopable <span class="op">}</span> <span class="im">from</span> <span class="st">'./index.min.js'</span></span>
<span id="cb1-9"><a href="#cb1-9"></a> <span class="va">Scrolltopable</span>.<span class="at">init</span>(<span class="op">{</span></span>
<span id="cb1-10"><a href="#cb1-10"></a> <span class="dt">text</span><span class="op">:</span> <span class="st">'Top'</span><span class="op">,</span></span>
<span id="cb1-11"><a href="#cb1-11"></a> <span class="dt">hideTop</span><span class="op">:</span> <span class="dv">0</span><span class="op">,</span></span>
<span id="cb1-12"><a href="#cb1-12"></a> <span class="op">}</span>)</span>
<span id="cb1-13"><a href="#cb1-13"></a> <span class="kw"></script></span></span>
<span id="cb1-14"><a href="#cb1-14"></a><span class="kw"></head></span></span></code></pre></div>
<p>Note: you can install package locally by running <code>npm i @internetguru/scrolltopable --save</code>.</p>
<h2 id="advanced-example">Advanced Example</h2>
<p>Launch a rocket after clicking a button! <a href="https://www.webtesting.cz/">See it in production</a>.</p>
<div class="sourceCode" id="cb2"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb2-1"><a href="#cb2-1"></a><span class="kw"><head></span></span>
<span id="cb2-2"><a href="#cb2-2"></a> <span class="co"><!-- include basic css --></span></span>
<span id="cb2-3"><a href="#cb2-3"></a> <span class="kw"><link</span><span class="ot"> rel=</span><span class="st">"stylesheet"</span><span class="ot"> type=</span><span class="st">"text/css"</span><span class="ot"> href=</span><span class="st">"https://unpkg.com/@internetguru/scrolltopable@latest/basic.css"</span><span class="kw">/></span></span>
<span id="cb2-4"><a href="#cb2-4"></a> <span class="co"><!-- include fontawesome --></span></span>
<span id="cb2-5"><a href="#cb2-5"></a> <span class="kw"><script</span><span class="ot"> type=</span><span class="st">"text/javascript"</span><span class="ot"> src=</span><span class="st">"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/js/all.min.js"</span><span class="kw">></script></span></span>
<span id="cb2-6"><a href="#cb2-6"></a> <span class="co"><!-- include scrolltopable --></span></span>
<span id="cb2-7"><a href="#cb2-7"></a> <span class="kw"><script</span><span class="ot"> type=</span><span class="st">"module"</span><span class="ot"> src=</span><span class="st">"index.js"</span><span class="kw">></script></span></span>
<span id="cb2-8"><a href="#cb2-8"></a> <span class="co"><!-- initialization with modifying default options --></span></span>
<span id="cb2-9"><a href="#cb2-9"></a> <span class="kw"><script</span><span class="ot"> type=</span><span class="st">"module"</span><span class="kw">></span></span>
<span id="cb2-10"><a href="#cb2-10"></a> <span class="im">import</span> <span class="op">{</span> Scrolltopable <span class="op">}</span> <span class="im">from</span> <span class="st">'./index.js'</span></span>
<span id="cb2-11"><a href="#cb2-11"></a> <span class="va">Scrolltopable</span>.<span class="at">init</span>(<span class="op">{</span></span>
<span id="cb2-12"><a href="#cb2-12"></a> <span class="dt">text</span><span class="op">:</span> <span class="st">"<span class='fa fa-fw fa-space-shuttle fa-rotate-270'></span>"</span><span class="op">,</span></span>
<span id="cb2-13"><a href="#cb2-13"></a> <span class="dt">activeTimeout</span><span class="op">:</span> <span class="dv">1500</span></span>
<span id="cb2-14"><a href="#cb2-14"></a> <span class="op">}</span>)</span>
<span id="cb2-15"><a href="#cb2-15"></a> <span class="kw"></script></span></span>
<span id="cb2-16"><a href="#cb2-16"></a> <span class="co"><!-- launch animation and rocket icon styles --></span></span>
<span id="cb2-17"><a href="#cb2-17"></a> <span class="kw"><style</span><span class="ot"> type=</span><span class="st">"text/css"</span><span class="kw">></span></span>
<span id="cb2-18"><a href="#cb2-18"></a> html {</span>
<span id="cb2-19"><a href="#cb2-19"></a> scroll-behavior: smooth<span class="op">;</span></span>
<span id="cb2-20"><a href="#cb2-20"></a> }</span>
<span id="cb2-21"><a href="#cb2-21"></a> <span class="pp">#js-scrolltopable</span> {</span>
<span id="cb2-22"><a href="#cb2-22"></a> <span class="kw">background</span>: <span class="dv">none</span><span class="op">;</span></span>
<span id="cb2-23"><a href="#cb2-23"></a> }</span>
<span id="cb2-24"><a href="#cb2-24"></a> <span class="pp">#js-scrolltopable</span> svg {</span>
<span id="cb2-25"><a href="#cb2-25"></a> <span class="kw">position</span>: <span class="dv">relative</span><span class="op">;</span></span>
<span id="cb2-26"><a href="#cb2-26"></a> <span class="kw">left</span>: <span class="dv">0</span><span class="op">;</span></span>
<span id="cb2-27"><a href="#cb2-27"></a> <span class="kw">top</span>: <span class="dv">-0.25</span><span class="dt">em</span><span class="op">;</span></span>
<span id="cb2-28"><a href="#cb2-28"></a> <span class="kw">font-size</span>: <span class="dv">0.65</span><span class="dt">em</span><span class="op">;</span></span>
<span id="cb2-29"><a href="#cb2-29"></a> <span class="kw">color</span>: <span class="cn">black</span><span class="op">;</span></span>
<span id="cb2-30"><a href="#cb2-30"></a> }</span>
<span id="cb2-31"><a href="#cb2-31"></a> <span class="pp">#js-scrolltopable</span><span class="fu">.js-scrolltopable--active</span> {</span>
<span id="cb2-32"><a href="#cb2-32"></a> <span class="kw">animation-name</span>: launch<span class="op">;</span></span>
<span id="cb2-33"><a href="#cb2-33"></a> <span class="kw">animation-duration</span>: <span class="dv">1</span><span class="dt">s</span><span class="op">;</span></span>
<span id="cb2-34"><a href="#cb2-34"></a> <span class="kw">animation-timing-function</span>: <span class="dv">ease-in</span><span class="op">;</span></span>
<span id="cb2-35"><a href="#cb2-35"></a> <span class="kw">animation-fill-mode</span>: <span class="dv">forwards</span><span class="op">;</span></span>
<span id="cb2-36"><a href="#cb2-36"></a> <span class="kw">opacity</span>: <span class="dv">1</span><span class="op">;</span></span>
<span id="cb2-37"><a href="#cb2-37"></a> }</span>
<span id="cb2-38"><a href="#cb2-38"></a> <span class="im">@keyframes</span> launch {</span>
<span id="cb2-39"><a href="#cb2-39"></a> <span class="dv">90%</span> {<span class="kw">bottom</span>: <span class="dv">100</span><span class="dt">vh</span><span class="op">;</span> <span class="kw">opacity</span>: <span class="dv">1</span><span class="op">;</span>}</span>
<span id="cb2-40"><a href="#cb2-40"></a> <span class="dv">100%</span> {<span class="kw">bottom</span>: <span class="dv">100</span><span class="dt">vh</span><span class="op">;</span> <span class="kw">opacity</span>: <span class="dv">0</span><span class="op">;</span>}</span>
<span id="cb2-41"><a href="#cb2-41"></a> }</span>
<span id="cb2-42"><a href="#cb2-42"></a> <span class="kw"></style></span></span>
<span id="cb2-43"><a href="#cb2-43"></a><span class="kw"></head></span></span></code></pre></div>
<h2 id="options">Options</h2>
<table>
<thead>
<tr class="header">
<th>Configuration name</th>
<th>Default value</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td>content</td>
<td><code>↑</code></td>
<td>Button content (raw HTML)</td>
</tr>
<tr class="even">
<td>title</td>
<td><code>Top</code></td>
<td>Button title</td>
</tr>
<tr class="odd">
<td>id</td>
<td><code>js-scrolltopable</code></td>
<td>Button id and class name</td>
</tr>
<tr class="even">
<td>visibleClass</td>
<td><code>js-scrolltopable--visible</code></td>
<td>Class for visible button</td>
</tr>
<tr class="odd">
<td>activeClass</td>
<td><code>js-scrolltopable--active</code></td>
<td>Class for active button</td>
</tr>
<tr class="even">
<td>extraClass</td>
<td><code>noprint</code></td>
<td>List of extra classes separated by space</td>
</tr>
<tr class="odd">
<td>hideBeforeTop</td>
<td><code>500</code></td>
<td>No-show zone from the top (px)</td>
</tr>
<tr class="even">
<td>showBeforeBottom</td>
<td><code>500</code></td>
<td>No-hide zone from the button (px)</td>
</tr>
<tr class="odd">
<td>showAfterUp</td>
<td><code>200</code></td>
<td>Show the button after scrolling up (px)</td>
</tr>
<tr class="even">
<td>hideAfterDown</td>
<td><code>200</code></td>
<td>Hide the button after scrolling down (px)</td>
</tr>
<tr class="odd">
<td>activeTime</td>
<td><code>0</code></td>
<td>Keep <code>activeClass</code> after clicking the button (ms)</td>
</tr>
<tr class="even">
<td>scrollActionDelay</td>
<td><code>200</code></td>
<td>Wait before evaluating scrolling (ms)</td>
</tr>
</tbody>
</table>
<h2 id="maintainers">Maintainers</h2>
<ul>
<li>Paulo Petrzela [email protected]</li>
<li>George Pavelka [email protected]</li>
</ul>
<h2 id="contributing">Contributing</h2>
<p>Pull requests are welcome, don’t hesitate to contribute.</p>
<h2 id="donation">Donation</h2>
<p>If you find this program useful, please <strong>send a donation</strong> to its developers to support their work. If you use this program at your workplace, please suggest that the company make a donation. We appreciate contributions of any size. Donations enable us to spend more time working on this package, and help cover our infrastructure expenses.</p>
<p>If you’d like to make a donation of any value, please send it to the following PayPal address:</p>
<p><a href="https://www.paypal.com/donate/?hosted_button_id=FVH97VVYW8NM6">PayPal Donation</a></p>
<p>Since we aren’t a tax-exempt organization, we can’t offer you a tax deduction. But for all donations over 50 USD, we’d be happy to recognize your contribution on this README file for the next release.</p>
<p>We are also happy to consider making particular improvements or changes, or giving specific technical assistance, in return for a substantial donation over 100 USD. If you would like to discuss this possibility, write us at [email protected].</p>
<p>Another possibility is to pay a software maintenance fee. Again, write us about this at [email protected] to discuss how much you want to pay and how much maintenance we can offer in return.</p>
<p>Thanks for your support!</p>
<h2 id="license">License</h2>
<p>MIT License</p>
<p>Copyright (c) 2022 Internet Guru</p>
<p>Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:</p>
<p>The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.</p>
<p>THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.</p>
</body>
</html>