Home > Programming > One Page scrolling with Jquery

One Page scrolling with Jquery

nowadays vertically and horizontly scrolling websites are scattered around the net.
In this tutorial we will create a simple smooth scrolling effect with jQuery.We will be using the jQuery Easing Plugin and just a few lines of jQuery. So, let’s start!

HTML5

The html is actually pretty simple. You’ve seen the FAQ pages that have a list of questions at the top, and then you click one and it takes you to the middle of the page
<html>

<head>

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js”></script&gt;

<script src=”scroll.js” language=”javascript” type=”text/javascript”></script>
<link rel=”stylesheet” type=”text/css” href=”style.css” />

</head>
<body bgcolor=”#999999″>

<div id = “menubar”>
<ul style=” list-style: none;” id=”list-nav”>
<li> <a> <div class=”home-title”> Home </div> </a> </li>
<li> <a> <div class=”about-title”> About Me </div> </a> </li>
<li> <a> <div class=”contact-title”> Contact </div> </a> </li>
<li> <a> <div class=”blog-title”> Blog </div> </a> </li>
</ul>
</div>
<div id=”container”>
<div class=”home”>
<div class= “innerdiv” >Home</div>
</div>

<div class=”aboutme”>
<div class= “innerdiv”>About Me </div>
</div>

<div class=”contact”>
<div class= “innerdiv”>Contact</div>
</div>

<div class=”blog”>
<div class= “innerdiv”>Blog</div>
</div>
</div>

</body>

</html>

CSS

The CSS is also quite basic. First, we define the page colors and positioning for the header and paragraphs.

/******************** Main DIV****************/
.home, .aboutme, .contact, .blog{
padding:30px;
}

.home{
height:100%;
background-color:#999999;
margin-bottom:30px;
}

.aboutme{
height:100%;
background-color:#999999;
margin-bottom:30px;
}

.contact{
height:100%;
background-color:#999999;
margin-bottom:30px;
}

.blog{
height:100%;
background-color:#999999;
margin-bottom:30px;
}

.innerdiv{
height:96%;
border:2px solid;
border-radius: 10px;
background-color:#EEEEEE;
}
.home-title, .about-title, .contact-title, .blog-title{
cursor:pointer;
}

/**************** MENUBAR***********************/
#menubar{
text-align:center;
position: fixed;
margin-top: -28px;
margin-left: 280px;}

ul#list-nav {
margin:20px;
padding:0;
list-style:none;
width:525px;}

ul#list-nav li {
display:inline
}

ul#list-nav li a {
text-decoration:none;
padding:5px 0;
width:100px;
background:#abaaac;
color:#eee;
float:left;
}

Jquery

In order to make your page scroll up and down smoothly using jquery, just paste the following code into your html file.When you click a link in your site that takes you somewhere else within the same page it will slide smoothly.
The function for the horizontal scrolling effect is the following:

$(“document”).ready(function() {

$(‘.home-title’).click(function(){

$(‘html, body’).animate({
scrollTop: $(“.home”).offset().top
}, 1000);

});

$(‘.about-title’).click(function(){

$(‘html, body’).animate({
scrollTop: $(“.aboutme”).offset().top
}, 1000);

});

$(‘.contact-title’).click(function(){

$(‘html, body’).animate({
scrollTop: $(“.contact”).offset().top
}, 1000);

});

$(‘.blog-title’).click(function(){

$(‘html, body’).animate({
scrollTop: $(“.blog”).offset().top
}, 1000);

});

});
If you want to change the speed, go to the line that reads

“.animate({scrollTop: $(“.contact”).offset().top}, 1000); ”

and change the 1000 to whatever you want. (1000 = 1 seconds).

Categories: Programming
  1. August 7, 2012 at 8:51 am

    Hello there! Do you know if they make any plugins
    to safeguard against hackers? I’m kinda paranoid about losing everything I’ve worked hard on.
    Any recommendations?

    • August 24, 2012 at 6:59 am

      I have to see . But sure i will see🙂🙂

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: