-
Notifications
You must be signed in to change notification settings - Fork 14
/
index.html
73 lines (63 loc) · 2.51 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
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>PlusAnchor</title>
<style>
* { margin: 0; padding: 0; }
h1 { text-align: center; }
div { float: left; clear: both; height: 300px; width: 300px; margin-top: 1200px; }
div:nth-child(2n) { float: right; }
ul { position: fixed; left: 0; top: 0; }
#block-1 { background: red; }
#block-2 { background: orange; }
#block-3 { background: papayawhip; }
#block-4 { background: teal; }
#back-to-top { position: fixed; right: 10px; bottom: 10px; }
.clear { clear: both; }
</style>
</head>
<body id="top">
<h1>PlusAnchor</h1>
<a href="#top" id="back-to-top">Back To Top</a>
<ul>
<li><a href="#block-1">Block 1</a></li>
<li><a href="#block-2">Block 2</a></li>
<li><a href="#block-3">Block 3</a></li>
<li><a href="#block-4">Block 4</a></li>
</ul>
<div id="block-1"></div>
<div id="block-2"></div>
<div id="block-3"></div>
<div id="block-4"></div>
<script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="bower_components/jquery.easing/js/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/jquery.plusanchor.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
$('body, html').plusAnchor({
easing: 'easeInOutExpo',
offsetTop: -20,
speed: 700,
onInit: function( base ) {
var hash = window.location.hash;
// If hash exists and link exists on page
if (hash && $(hash).length > 0 ) {
window.location.hash = 'hash_' + hash.substring(1); // remove #
window.scrollTo(0, 0); // Scroll to top
// On load
$(window).load( function() {
// Scroll to hash after page load
var timer = setTimeout(function() {
$(base.scrollEl).animate({
scrollTop: $( hash ).offset().top
}, base.options.speed, base.options.easing);
}, 1000);
}); // window.load
}; // if window.location.hash
} // onInit
});
});
</script>
</body>
</html>