Create A One Page Scrolling Website with jQuery and CSS3

File Size: 1.72 KB
Views Total: 2093
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Create A One Page Scrolling Website with jQuery and CSS3

A simple jQuery script for one page scrolling website that uses CSS3 and Javascript to split the webpage into several sections with side navigation so you can navigate through these sections by scrolling the page or clicking the dots navigation.

Getting started:

1. Markup Html structure.

<section id="main" class="blue full-height"></section>
<section id="secondary" class="red full-height"></section>
<section id="third" class="green full-height"></section>
<section id="fourth" class="pink full-height"></section>
<section id="fifth" class="black full-height"></section>

2. The CSS/CSS3 rules.

body {
margin: 0px;
padding: 0px;
}
nav {
-webkit-backface-visibility: hidden;
z-index: 5;
position: fixed;
top: 50%;
left: 0px;
right: 0px;
margin-top: -100px;
/*  margin: auto;
*/  width: 100px;
opacity: 0.75;
}
nav li {
height: 20px;
margin: 10px 0px;
list-style: none;
}
nav a {
display: block;
width: 10px;
height: 10px;
text-indent: -9999px;
border-radius: 25px;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
background-color: transparent;
border: 3px solid #fff;
transition: all 0.3s ease;
position: relative;
left: 0px;
top: 0px;
}
nav a:hover, nav a.active {
background-color: #fff;
width: 15px;
height: 15px;
left: -3px;
top: -3px
}
.red {
background-color: #B23751;
}
.blue {
background-color: #346CA5;
}
.green {
background-color: #65B237;
}
.pink {
background-color: #c0392b;
}
.black {
background-color: #2c3e50;
}
section {
height: 980px;
}

3. Include the latest version of jQuery library at the bottom of the page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

4. Add the following Javascript snippet into your JS file.

<script>
$('a[href^="#"]').click(function(event) {
var id = $(this).attr("href");
var target = $(id).offset().top;
$('html, body').animate({scrollTop:target}, 500);
event.preventDefault();
});

function getTargetTop(elem){
var id = elem.attr("href");
var offset = 60;
return $(id).offset().top - offset;
}


$(window).scroll(function(e){
isSelected($(window).scrollTop())
});

var sections = $('a[href^="#"]');

function isSelected(scrolledTo){
   
var threshold = 100;
var i;

for (i = 0; i < sections.length; i++) {
var section = $(sections[i]);
var target = getTargetTop(section);
   
if (scrolledTo > target - threshold && scrolledTo < target + threshold) {
sections.removeClass("active");
section.addClass("active");
}

};
}
</script>

This awesome jQuery plugin is developed by tsni. For more Advanced Usages, please check the demo page or visit the official website.