This time I will share jQuery Plugin and tutorial about jQuery Based One Page Scroll Web Template – smooth-scroll.js, hope it will help you in programming stack.
| File Size: | 2.76 KB |
|---|---|
| Views Total: | 2550 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
smooth-scroll.js is a jQuery plugin which makes it easy to create a one page scrolling website/web application with a sticky header navigation. Clicking on the menu item will scroll the webpage into its corresponding content section with a smooth scrolling effect.
How to use it:
1. Put the latest version of jQuery library and the jQuery smooth-scroll.js plugin into your html page.
1 |
<script src="//code.jquery.com/jquery-3.0.0.min.js"></script> |
2 |
<script src="smooth-scroll.js"></script> |
2. Create a navigation menu and sectioned content for your one page scroll webpage.
01 |
<div class="main"> |
02 |
<nav> |
03 |
<ul> |
04 |
<li><a href="#home">Home</a></li> |
05 |
<li><a href="#about">About</a></li> |
06 |
<li><a href="#gallery"><a href="https://www.jqueryscript.net/gallery/">Gallery</a></a></li> |
07 |
<li><a href="#info">Info</a></li> |
08 |
<li><a href="#contacts">Contacts</a></li> |
09 |
</ul> |
10 |
</nav> |
11 |
12 |
<section id="home"><h2>home</h2></section> |
13 |
<section id="about"><h2>about</h2></section> |
14 |
<section id="gallery"><h2>gallery</h2></section> |
15 |
<section id="info"><h2>info</h2></section> |
16 |
<section id="contacts"><h2>contacts</h2></section> |
17 |
</div> |
3. The sample CSS styles for the one page scroll webpage.
01 |
* { box-sizing: border-box } |
02 |
03 |
.main { |
04 |
position: relative; |
05 |
max-width: 960px; |
06 |
background-color: #e3e3e3; |
07 |
margin: 10px auto; |
08 |
padding: 20px 10px; |
09 |
} |
10 |
11 |
.main nav { |
12 |
position: fixed; |
13 |
width: auto; |
14 |
margin-left: -20px; |
15 |
margin-top: -20px; |
16 |
padding: 10px; |
17 |
text-align: center; |
18 |
background-color: #34495e; |
19 |
box-shadow: 0 1px 5px rgba(0,0,0,0.3); |
20 |
} |
21 |
22 |
.main nav:before { |
23 |
content: ""; |
24 |
display: block; |
25 |
position: absolute; |
26 |
bottom: -10px; |
27 |
left: 0; |
28 |
width: 10px; |
29 |
height: 10px; |
30 |
-webkit-clip-path: polygon(100% 100%, 100% 0, 0 0); |
31 |
background-color: #4A6988; |
32 |
z-index: -1; |
33 |
} |
34 |
35 |
.main ul { |
36 |
padding: 0; |
37 |
margin: 0; |
38 |
} |
39 |
40 |
.main nav li { |
41 |
display: inline; |
42 |
margin: 10px; |
43 |
list-style-type: none; |
44 |
width: 100%; |
45 |
} |
46 |
47 |
.main nav a { |
48 |
text-decoration: none; |
49 |
color: #fff; |
50 |
text-transform: uppercase; |
51 |
font-size: 1.1em; |
52 |
display: inline-block; |
53 |
} |
54 |
55 |
section { |
56 |
padding-top: 10px; |
57 |
height: 500px; |
58 |
width: 100%; |
59 |
background-color: #B2B2B2; |
60 |
margin: 20px 0; |
61 |
} |
62 |
63 |
section h2 { |
64 |
color: #fff; |
65 |
text-align: center; |
66 |
font-size: 30px; |
67 |
text-transform: uppercase; |
68 |
} |
69 |
