How to: Create A Single Page Website with HTML

By | 20/03/2013

In The Website Designing there are many more page designing methods. The Single page site designing is also a attractive and it looks awesome.

This is a New style of page designing and most of the designers and readers will like it. This type will suite to the Portfolio sites and Gallery sites.It is an Vertical Scroll one Page website.

This can be done with simple the simple HTML and CSS. But the scrolling animation had to be done with the JQuery and JScript.

Here the simple code for the Single Page Website

Select Code
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
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

One Page Site-Tobby news
<div class="header">
<div class="list">

<a href="#about">About Us</a>

<a href="#gallery">Gallery</a>

<a href="#contact">Conatct Us</a>

</div>
</div>
<div class="container">
<div class="page1">

<a name="about"></a>
<div class="page-padding"></div>
This is About Us Page

</div>
<div class="page2">

<a name="gallery"></a>
<div class="page-padding"></div>
This is Gallery Page

</div>
<div class="page3">

<a name="contact"></a>
<div class="page-padding"></div>
This is Contact Us Page

</div>
</div>
Select Code
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
*
{
margin:0 auto;
}
a
{
color: #fff;
text-decoration: none;
padding-right: 20px;
}
.header
{
position:fixed;
top:0;
float:left;
text-decoration:none;
height:45px;
width:100%;
background:#000;
padding-top:15px;
left:0;
}
.list
{
padding-left:25%;
font:"Comic Sans MS", cursive;
font-size:22px;
}
.page1
{
width:auto;
height:1000px;
background:#3CC;
padding-top: 90px;
}
.page2
{
width:auto;
height:1000px;
background:#6CF;
margin-top: 50px;
padding-top: 100px;
}
.page3
{
width:auto;
height:1000px;
background:#0CF;
margin-top: 114px;
margin-top: 50px;
padding-top: 50px;
}
.container
{
margin-left:60px;
margin-right:50px;
margin-top: 60px;
}
.page-padding {height:90px; width:100%;}
Select Code
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
<script type="text/javascript">// <![CDATA[
$(document).ready(function() {
  function filterPath(string) {
    return string
      .replace(/^\//,'')  
      .replace(/(index|default).[a-zA-Z]{3,4}$/,'')  
      .replace(/\/$/,'');
  }
  $('a[href*=#]').each(function() {
    if ( filterPath(location.pathname) == filterPath(this.pathname)
    &#038;& location.hostname == this.hostname
    &#038;& this.hash.replace(/#/,'') ) {
      var $targetId = $(this.hash), $targetAnchor = $('[name=' + this.hash.slice(1) +']');
      var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false;
       if ($target) {
         var targetOffset = $target.offset().top;
         $(this).click(function() {
           $('html, body').animate({scrollTop: targetOffset}, 2000);
           return false;
         });
      }
    }
  });
});
// ]]></script>

 

Click Here to Download the jquery.min.js

 

This is a Simple and Easy template to learn how to create a Vertical Scroll Single page Website.

Click here to Download Html and JScript for the Vertical Scroll Single page Website.

 

Post By Praveen (38 Posts)

Website: →

Connect

About Praveen

Praveen S has written 38 post in this blog.

Leave a Reply