-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·77 lines (72 loc) · 2.82 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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dynamic Section Scroller</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/master.css" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/sectionscroll.js"></script>
</head>
<body>
<header>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Section Scroller</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active sectionhighlight"><a href="#section1">Section1</a></li>
<li class="sectionhighlight"><a href="#section2">Section2</a></li>
<li class="sectionhighlight"><a href="#section3">Section3</a></li>
<li class="sectionhighlight"><a href="#section4">Section4</a></li>
<li class="sectionhighlight"><a href="#section5">Section5</a></li>
<li class="sectionhighlight"><a href="#section6">Section6</a></li>
<li class="sectionhighlight"><a href="#section7">Section7</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
</header>
<!--scroller-->
<div class="scroller">
<div id="arrow_up" class="arrow" ><img src="images/up-arrow-new.png" alt=""/></div>
<div id="arrow_down" class="arrow arrow-down"><img src="images/down-arrow-new.png" alt=""/></div>
</div>
<section id="section1">
<h1>Section Scroller.</h1>
<p>With this jquery plugin, we need not have up and down scroll arrows in every sections. Just have one fixed scroller at the bottom of the page, to scroll to previous or next sections.</p>
</section>
<section id="section2">
<h1>Section 2</h1>
</section>
<section id="section3">
<h1>Section 3</h1>
</section>
<section id="section4">
<h1>Section 4</h1>
</section>
<section id="section5">
<h1>Section 5</h1>
</section>
<section id="section6">
<h1>Section 6</h1>
</section>
<section id="section7">
<h1>Section 7</h1>
</section>
<footer>
<div class="container">
<p class="text-center text-uppercase">Section Scroller, © 2015</p>
</div>
</footer>
</body>
</html>