Freestyle :: Jump To Content

This is an example of

Buttons that jump (as opposed to scroll) to sections on a vertically tall page of content - click on a button above to test.
A vertically tall page with various sections each with a unique background image.
Within each section, there is a centered artcile area of width=980px (instead of a single centered section with lots of articles within the single main section). The width of 980 px is for optimal tablet viewing.
Wthin each section, there is either a set height in pixels or height="auto" to elastically grow with content
Each article has a transparent solid background color to reveal the section background image

Here's the html code


    
<nav>
  <div id="buttons">
    <div class="btn" id="btn1"><a href="#section1">Button 1</a></div>
    <div class="btn" id="btn2"><a href="#section2">Button 2</a></div>
    <div class="btn" id="btn3"><a href="#section3">Button 3</a></div>
    <div class="btn" id="btn4"><a href="#section4">Button 4</a></div>
    <div class="btn" id="btn5"><a href="#section5">Button 5</a></div>
    <div class="btn" id="btn6"><a href="#section6">Button 6</a></div>
  </div>
</nav>
<section id="section1">
  <article id="article1">Content for  id "article3" Goes Here</article>
</section>
<section id="section2">
  <article id="article2">Content for  id "article3" Goes Here</article>
</section>
<section id="section3">
  <article id="article3">Content for  id "article3" Goes Here</article>
</section>
<section id="section4">
  <article id="article4">Content for  id "article4" Goes Here</article>
</section>
<section id="section5">
  <article id="article5">Content for  id "article5" Goes Here</article>
</section>
<section id="section6">
  <article id="article6">Content for  id "article6" Goes Here</article>
</section>
<section id="section7">
  <footer>Copyright 201x © Freestyle Academy. All rights reserved</footer>
</section>

Here's the CSS


    
nav {
	width: 100%;
	height: 20px;
	position: fixed;/*Fixes the nav elements to top of page and will not scroll with content*/
    top:0;
    left:0;
	z-index: 99999;/*This LARGE number ensures nav elements will be on TOP of sections and article*/
}
#buttons {
	width: 980px;
	height: 20px;
	margin: 0 auto;/*centers all buttons to browser*/
}
#btn1 {
	margin-left: 374px;/*used to shift all buttons to the right inside #buttons*/
}
.btn {/*styling for all the buttons*/
	width: 100px;
	height: 20px;/*Same as #buttons above*/
	float: left;
	cursor: pointer;
	text-align: center;
	color: #0000FF;
	background-color: rgba(255,255,0,0.5);
	border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}
section {
	width: 100%;
	height: auto;
	position: relative;
	z-index: 100;/*Must be smaller than z-index for nav above*/
}
article, footer {
	width: 970px;
	margin-right: auto;
	margin-left: auto;
	padding-bottom: 5px;
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 50px;/*Used to push article content down from top to prevent overlap with top buttons*/
}
/*Set the background images for each section*/
#section1 {
	background-image: url(images/bg1.jpg);
}
#section2 {
	background-image: url(images/bg2.jpg);
}
#section3 {
	background-image: url(images/bg3.jpg);
}
#section4 {
	background-image: url(images/bg4.jpg);
}
#section5 {
	background-image: url(images/bg5.jpg);
}
#section6 {
	background-image: url(images/bg6.jpg);
}
#section7 {
	background-image: url(images/bg7.jpg);
}
#article1 {
	background-color: rgba(255,153,102,0.5);/*The 0.5 at the end makes the solid color 50% transparent*/
	height: auto;/*Allows article to grow vertically as needed from content*/
	color: #FFFFFF;/*Text color*/
}
#article2 {
	background-color: rgba(153,204,102,0.5);
	height: auto;
}
#article3 {
	background-color: rgba(51,255,153,0.5);
	height: 700px;/*Article has specific height independent from content*/
}
#article4 {
	background-color: rgba(102,204,255,0.5);
	height: 400px;
}
#article5 {
	background-color: rgba(204,204,255,0.5);
	height: 300px;
}
#article6 {
	background-color: rgba(51,255,153,0.5);
	height: 600px;
}
footer {
	background-color: rgba(51,51,51,0.5);
	color: #FFF;
	height: 600px;/*Makes this tall so that #article6 can be allowed to go all the way to the top*/
	text-align: center;
    font-size: 0.8em;
}

Content for id "article4" Goes Here

Content for id "article5" Goes Here

Content for id "article6" Goes Here