Single page websites seem to be all the rage now a days. Scrolling effects seem to be in high demand. So in this post I’ll show you how to create a smooth scrolling page with jQuery.
What are we building?
We’ll be creating our own fansy smansy website. The nav will sit fixed at the top. Once we click on a nav item it will scroll down to the section. Best of all, if JavaScript is shut off, it will degrade gracefull and just jump down to the section.
See Demo | Download Source Files
The HTML : Content
First thing we need is some content to scroll. This can be anything as long as their is enough of it to scroll….otherwise this tutorial is pointless ;) At the top of each section we’ll need to specify an id (we’ll be using this for our navigation). It can be on anything. Really just put the id on what you want to appear at the top of the page. For this example I put it on the header tags.
<div class="container">
<div class="section">
<h1 id="html">HTML</h1>
<p><!--Your HTML Content Goes HERE --></p>
</div>
<div class="section">
<h1 id="css">CSS</h1>
<p><!--Your HTML Content Goes HERE --></p>
</div>
<div class="section">
<h1 id="php">PHP</h1>
<p><!--Your HTML Content Goes HERE --></p>
</div>
<div class="section">
<h1 id="javascript">JavaScript</h1>
<p><!--Your HTML Content Goes HERE --></p>
</div>
<div class="section">
<h1 id="jquery">jQuery</h1>
<p><!--Your HTML Content Goes HERE --></p>
</div>
</div>
The HTML : Navigation
Now that we know what the ids are for each section we can go ahead and use those to create a navigation.
<div class="navigation">
<a href="#html">HTML</a>
<a href="#css">CSS</a>
<a href="#php">PHP</a>
<a href="#javascript">JavaScript</a>
<a href="#jquery">jQuery</a>
</div>
Now just having this when we click on the navigation it should take us down to our desired location.
The CSS
Nothing to Crazy here. The most important part is the navigation. The position:fixed attribute keeps it at the top. And the margin top on the section class just make sure the content isn’t below the navigation when first loading the page.
<style>
/* Made the container thin
so I didn't have to come up
with too much content */
.container{
width:300px;
margin:0 auto;
}
/* So the sections don't fall
underneath the navigation */
.section{
margin-top:60px;
}
/*
1. Keeps the position at the top of the page.
2. Adds a background so you can't see text
underneath the nav.
3. Adds a little padding for breathing room.
*/
.navigation{
position: fixed;
background:white;
padding:20px 20px;
width:100%;
margin-top:0px;
top:0px;
}
</style>
The jQuery (aka The Magic behind smooth scrolling)
The jQuery isn’t overly complicated. We’re just going to use the animate function to a specific location over time. Now we get that location by referencing the item that has the id that the href of our navigation points to. So if our navigation points to “#css”, then we’ll get the position of the item that has the id of “css”
<script>
$(document).ready(function() {
// Click event for any anchor tag that's href starts with #
$('a[href^="#"]').click(function(event) {
// The id of the section we want to go to.
var id = $(this).attr("href");
// An offset to push the content down from the top.
var offset = 60;
// Our scroll target : the top position of the
// section that has the id referenced by our href.
var target = $(id).offset().top - offset;
// The magic...smooth scrollin' goodness.
$('html, body').animate({scrollTop:target}, 500);
//prevent the page from jumping down to our section.
event.preventDefault();
});
});
</script>
-----------------------------------------------------------------------------------------------
Putting it all together
Here is everything all in one.
Enjoy ! :)
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Smooth Scrolling</title>
<style>
/* Made the container thin
so I didn't have to come up
with too much content */
.container{
width:300px;
margin:0 auto;
}
/* So the sections don't fall
underneath the navigation */
.section{
margin-top:60px;
}
/*
1. Keeps the position at the top of the page.
2. Adds a background so you can't see text
underneath the nav.
3. Adds a little padding for breathing room.
*/
.navigation{
position: fixed;
background:white;
padding:20px 20px;
width:100%;
margin-top:0px;
top:0px;
}
</style>
</head>
<body>
<div class="container">
<div class="navigation">
<a href="#html">HTML</a>
<a href="#css">CSS</a>
<a href="#php">PHP</a>
<a href="#javascript">JavaScript</a>
<a href="#jquery">jQuery</a>
</div>
<div class="section">
<h1 id="html">HTML</h1>
<p><!--Your HTML Content Goes HERE --></p>
</div>
<div class="section">
<h1 id="css">CSS</h1>
<p><!--Your HTML Content Goes HERE --></p>
</div>
<div class="section">
<h1 id="php">PHP</h1>
<p><!--Your HTML Content Goes HERE --></p>
</div>
<div class="section">
<h1 id="javascript">JavaScript</h1>
<p><!--Your HTML Content Goes HERE --></p>
</div>
<div class="section">
<h1 id="jquery">jQuery</h1>
<p><!--Your HTML Content Goes HERE --></p>
</div>
</div>
<script>
$(document).ready(function() {
// Click event for any anchor tag that's href starts with #
$('a[href^="#"]').click(function(event) {
// The id of the section we want to go to.
var id = $(this).attr("href");
// An offset to push the content down from the top.
var offset = 60;
// Our scroll target : the top position of the
// section that has the id referenced by our href.
var target = $(id).offset().top - offset;
// The magic...smooth scrollin' goodness.
$('html, body').animate({scrollTop:target}, 500);
//prevent the page from jumping down to our section.
event.preventDefault();
});
});
</script>
</body>
</html>
-----------------------------------------------------------------------------------------------
See Demo | Download Source Files
What are we building?
We’ll be creating our own fansy smansy website. The nav will sit fixed at the top. Once we click on a nav item it will scroll down to the section. Best of all, if JavaScript is shut off, it will degrade gracefull and just jump down to the section.
See Demo | Download Source Files
The HTML : Content
First thing we need is some content to scroll. This can be anything as long as their is enough of it to scroll….otherwise this tutorial is pointless ;) At the top of each section we’ll need to specify an id (we’ll be using this for our navigation). It can be on anything. Really just put the id on what you want to appear at the top of the page. For this example I put it on the header tags.
<div class="container">
<div class="section">
<h1 id="html">HTML</h1>
<p><!--Your HTML Content Goes HERE --></p>
</div>
<div class="section">
<h1 id="css">CSS</h1>
<p><!--Your HTML Content Goes HERE --></p>
</div>
<div class="section">
<h1 id="php">PHP</h1>
<p><!--Your HTML Content Goes HERE --></p>
</div>
<div class="section">
<h1 id="javascript">JavaScript</h1>
<p><!--Your HTML Content Goes HERE --></p>
</div>
<div class="section">
<h1 id="jquery">jQuery</h1>
<p><!--Your HTML Content Goes HERE --></p>
</div>
</div>
The HTML : Navigation
Now that we know what the ids are for each section we can go ahead and use those to create a navigation.
<div class="navigation">
<a href="#html">HTML</a>
<a href="#css">CSS</a>
<a href="#php">PHP</a>
<a href="#javascript">JavaScript</a>
<a href="#jquery">jQuery</a>
</div>
Now just having this when we click on the navigation it should take us down to our desired location.
The CSS
Nothing to Crazy here. The most important part is the navigation. The position:fixed attribute keeps it at the top. And the margin top on the section class just make sure the content isn’t below the navigation when first loading the page.
<style>
/* Made the container thin
so I didn't have to come up
with too much content */
.container{
width:300px;
margin:0 auto;
}
/* So the sections don't fall
underneath the navigation */
.section{
margin-top:60px;
}
/*
1. Keeps the position at the top of the page.
2. Adds a background so you can't see text
underneath the nav.
3. Adds a little padding for breathing room.
*/
.navigation{
position: fixed;
background:white;
padding:20px 20px;
width:100%;
margin-top:0px;
top:0px;
}
</style>
The jQuery (aka The Magic behind smooth scrolling)
The jQuery isn’t overly complicated. We’re just going to use the animate function to a specific location over time. Now we get that location by referencing the item that has the id that the href of our navigation points to. So if our navigation points to “#css”, then we’ll get the position of the item that has the id of “css”
<script>
$(document).ready(function() {
// Click event for any anchor tag that's href starts with #
$('a[href^="#"]').click(function(event) {
// The id of the section we want to go to.
var id = $(this).attr("href");
// An offset to push the content down from the top.
var offset = 60;
// Our scroll target : the top position of the
// section that has the id referenced by our href.
var target = $(id).offset().top - offset;
// The magic...smooth scrollin' goodness.
$('html, body').animate({scrollTop:target}, 500);
//prevent the page from jumping down to our section.
event.preventDefault();
});
});
</script>
-----------------------------------------------------------------------------------------------
Putting it all together
Here is everything all in one.
Enjoy ! :)
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Smooth Scrolling</title>
<style>
/* Made the container thin
so I didn't have to come up
with too much content */
.container{
width:300px;
margin:0 auto;
}
/* So the sections don't fall
underneath the navigation */
.section{
margin-top:60px;
}
/*
1. Keeps the position at the top of the page.
2. Adds a background so you can't see text
underneath the nav.
3. Adds a little padding for breathing room.
*/
.navigation{
position: fixed;
background:white;
padding:20px 20px;
width:100%;
margin-top:0px;
top:0px;
}
</style>
</head>
<body>
<div class="container">
<div class="navigation">
<a href="#html">HTML</a>
<a href="#css">CSS</a>
<a href="#php">PHP</a>
<a href="#javascript">JavaScript</a>
<a href="#jquery">jQuery</a>
</div>
<div class="section">
<h1 id="html">HTML</h1>
<p><!--Your HTML Content Goes HERE --></p>
</div>
<div class="section">
<h1 id="css">CSS</h1>
<p><!--Your HTML Content Goes HERE --></p>
</div>
<div class="section">
<h1 id="php">PHP</h1>
<p><!--Your HTML Content Goes HERE --></p>
</div>
<div class="section">
<h1 id="javascript">JavaScript</h1>
<p><!--Your HTML Content Goes HERE --></p>
</div>
<div class="section">
<h1 id="jquery">jQuery</h1>
<p><!--Your HTML Content Goes HERE --></p>
</div>
</div>
<script>
$(document).ready(function() {
// Click event for any anchor tag that's href starts with #
$('a[href^="#"]').click(function(event) {
// The id of the section we want to go to.
var id = $(this).attr("href");
// An offset to push the content down from the top.
var offset = 60;
// Our scroll target : the top position of the
// section that has the id referenced by our href.
var target = $(id).offset().top - offset;
// The magic...smooth scrollin' goodness.
$('html, body').animate({scrollTop:target}, 500);
//prevent the page from jumping down to our section.
event.preventDefault();
});
});
</script>
</body>
</html>
-----------------------------------------------------------------------------------------------
See Demo | Download Source Files
No comments:
Post a Comment