forked from sksmatt/UItoTop-jQuery-Plugin
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·103 lines (75 loc) · 7.11 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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>UItoTop jQuery Plugin - Matt Varone</title>
<meta name="author" content="www.mattvarone.com">
<link rel="stylesheet" media="screen,projection" href="css/ui.totop.css" />
<meta name="viewport" content="width=device-width; initial-scale=1"/>
</head>
<!-- basic styling just for this demo -->
<style type="text/css" media="screen">
*{margin:0 auto;}
#wrapper {width:90%;margin:15px auto;}
p { margin:20px 0;}
</style>
<body>
<div id="wrapper">
<h1><strong>UItoTop</strong> jQuery dynamic scroll-to-Top plugin</h1>
<div class="entry">
<p>Small jQuery to create a dynamic to-top UI feature. <strong>Scroll down to demo</strong>.</p>
<p>The plugin: <a href="js/jquery.ui.totop.js" title="jquery.ui.totop.js">jquery.ui.totop.js</a></p>
<p>The css: <a href="css/ui.totop.css" title="ui.totop.css">ui.totop.css</a></p>
<p>The image: <a href="img/ui.totop.png" title="image ( 8-bit PNG )">Up Sprite ( 8-bit PNG )</a></p>
</div>
<p>by <a href="http://twitter.com/sksmatt" title="Visit Matt Varone">Matt Varone</a></p>
<h2>Header Level & 2</h2>
<div class="entry">
<p>Phasellus nisl nisl, posuere sed, rhoncus ut, tempus sed, orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam vitae pede. Mauris euismod erat eget sapien. Pellentesque adipiscing dui ut mi. Nunc porta blandit lectus. Quisque mauris sapien, adipiscing vel, hendrerit eget, commodo a, orci. Vestibulum vel nunc vel nisl rutrum tristique. Nulla facilisi. Nam ultricies. Vivamus mauris orci, consequat sed, venenatis at, congue accumsan, lectus. In hac habitasse platea dictumst. Quisque varius lorem quis libero. Quisque dui nisl, viverra vel, euismod ut, vehicula et, lacus. Phasellus vulputate cursus dolor.</p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nec odio ut ipsum rutrum aliquet. Praesent eget risus at sapien dignissim aliquet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In justo pede, accumsan sed, lacinia at, aliquam vitae, sem. Pellentesque a mauris vitae erat malesuada consectetur. Morbi diam risus, sollicitudin eu, laoreet et, cursus vel, enim. Aenean justo. Pellentesque id est a ipsum porttitor faucibus. Aliquam erat volutpat. Proin non odio. Integer laoreet dolor eu justo. Fusce vitae mauris ac pede consequat pulvinar. Ut auctor feugiat libero. Nullam consequat eros ac lacus.</p></div>
<p>Morbi mollis leo vitae orci. Phasellus bibendum tincidunt turpis. Nunc ultricies. Nunc convallis luctus risus. Nunc ac purus eget orci rutrum pellentesque. Fusce ultricies dui aliquet urna. Donec imperdiet sem eu mauris. Aliquam in justo et dolor egestas lacinia. Cras aliquet lectus eu tellus. Duis in ante. Quisque consequat tristique nulla. Aliquam ligula mauris, hendrerit ac, sagittis id, scelerisque eu, odio. Phasellus felis. Fusce fermentum tempus nunc. Donec posuere.</p>
<p>Phasellus nisl nisl, posuere sed, rhoncus ut, tempus sed, orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam vitae pede. Mauris euismod erat eget sapien. Pellentesque adipiscing dui ut mi. Nunc porta blandit lectus. Quisque mauris sapien, adipiscing vel, hendrerit eget, commodo a, orci. Vestibulum vel nunc vel nisl rutrum tristique. Nulla facilisi. Nam ultricies. Vivamus mauris orci, consequat sed, venenatis at, congue accumsan, lectus. In hac habitasse platea dictumst. Quisque varius lorem quis libero. Quisque dui nisl, viverra vel, euismod ut, vehicula et, lacus. Phasellus vulputate
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nec odio ut ipsum rutrum aliquet. Praesent eget risus at sapien dignissim aliquet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In justo pede, accumsan sed, lacinia at, aliquam vitae, sem. Pellentesque a mauris vitae erat malesuada consectetur. Morbi diam risus, sollicitudin eu, laoreet et, cursus vel, enim. Aenean justo. Pellentesque id est a ipsum porttitor faucibus. Aliquam erat volutpat. Proin non odio. Integer laoreet dolor eu justo. Fusce vitae mauris ac pede consequat pulvinar. Ut auctor feugiat libero. Nullam consequat eros ac lacus.</p>
<p>Morbi mollis leo vitae orci. Phasellus bibendum tincidunt turpis. Nunc ultricies. Nunc convallis luctus risus. Nunc ac purus eget orci rutrum pellentesque. Fusce ultricies dui aliquet urna. Donec imperdiet sem eu mauris. Aliquam in justo et dolor egestas lacinia. Cras aliquet lectus eu tellus. Duis in ante. Quisque consequat tristique nulla. Aliquam ligula mauris, hendrerit ac, sagittis id, scelerisque eu, odio. Phasellus felis. Fusce fermentum tempus nunc. Donec posuere.</p>
<p>Phasellus nisl nisl, posuere sed, rhoncus ut, tempus sed, orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam vitae pede. Mauris euismod erat eget sapien. Pellentesque adipiscing dui ut mi. Nunc porta blandit lectus. Quisque mauris sapien, adipiscing vel, hendrerit eget, commodo a, orci. Vestibulum vel nunc vel nisl rutrum tristique. Nulla facilisi. Nam ultricies. Vivamus mauris orci, consequat sed, venenatis at, congue accumsan, lectus. In hac habitasse platea dictumst. Quisque varius lorem quis libero. Quisque dui nisl, viverra vel, euismod ut, vehicula et, lacus. Phasellus vulputate cursus dolor.</p>
</div>
<!-- jquery -->
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<!-- easing plugin ( optional ) -->
<script src="js/easing.js" type="text/javascript"></script>
<!-- UItoTop plugin -->
<script src="js/jquery.ui.totop.js" type="text/javascript"></script>
<!-- Starting the plugin -->
<script type="text/javascript">
$(document).ready(function() {
/*
var defaults = {
containerID: 'toTop', // fading element id
containerHoverID: 'toTopHover', // fading element hover id
scrollSpeed: 1200,
easingType: 'linear'
};
*/
$().UItoTop({ easingType: 'easeOutQuart' });
});
</script>
</body>
</html>