I want to go to a specific section of my website when I click on the link in the menu bar for that section of the website, so you do not have to scroll through all the content, but to have links to the different sections. I've read that you can do this with jQuery and make an animation for it so that the page can smoothly go to that section of the website.
Here's the HTML code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript" src="java.js"></script>
<head>
<link rel="stylesheet" href="css/style.css" type="text/css"/>
<title>Test Website</title>
<meta name="" content="">
<script type="text/javascript">
</script>
</head>
<body>
<header>
<div id="title">
<h1 class="headertext">My Test Website</h1>
</div>
<div id="menubar">
<ul>
<li><a href="index.html">Homepage</a></li>
<li><a href="index.html">Homepage</a></li>
<li><a href="index.html">Homepage</a></li>
<li><a href="index.html">Homepage</a></li>
<li><a href="index.html">Homepage</a></li>
</ul>
</div>
</header>
<div class="hide">
</div>
<div id="container">
<div id="leftmenu">
<ul>
<li><a href="index.html">Homepage</a></li>
<li><a href="index.html">Homepage</a></li>
<li><a href="index.html">Homepage</a></li>
<li><a href="index.html">Homepage</a></li>
<li><a href="index.html">Homepage</a></li>
</ul>
<div id="triangle"></div>
</div>
<div id="content">
<h1>Contentpage</h1></br>
Picture slideshow
</br>
</br>
<div class="slider">
<img id="1" src="images/car1.jpg" border="0" alt="car1"/>
<img id="2" src="images/car2.jpg" border="0" alt="car2"/>
<img id="3" src="images/car3.jpg" border="0" alt="car3"/>
<img id="4" src="images/car4.jpg" border="0" alt="car4"/>
<img id="5" src="images/car5.jpg" border="0" alt="car5"/>
</div><!--slider end-->
<div class="shadow"></div>
<div class="borderbottom"></div>
</div><!--content div-->
</div>
</body>
</html>
And here is the CSS code:
*{
margin: 0 auto 0 auto;
text-align: left;
color: #ffffff;
}
body{
margin: 0;
text-align: left;
font-size: 13px;
font-family: arial, helvetica, sens-serif;
color: #ffffff;
width: 1200px;
height: auto;
background: #f4f4f4;
}
header {
position: fixed;
width: 100%;
top: 0;
background: rgba(0,0,0,.8);
z-index: 10;
}
h1{
color: black;
text-align: center;
}
.hide
{
position: fixed;
width: 100%;
top: 0;
background: rgba(255,255,255,1);
z-index:5;
height: 123px;
}
.headertext{
margin-top: 15px;
text-align: center;
color: white;
}
#title{
font-size: 20px;
margin: -10px 0 30px 0;
width: 100%;
height: 70px;
border-top: 2px solid #000000;
border-bottom: 2px solid #000000;
}
#menubar{
margin-top: 10px;
float: left;
clear: both;
width: 100%;
height: 20px;
list-style: none;
border-bottom: 2px solid #010000;
}
#menubar ul{
list-style: none;
margin-top: -15px;
text-align: center;
}
#menubar ul li{
list-style: none;
display: inline;
padding-right: 80px;
}
#menubar ul li a{
color: #ffffff;
text-decoration: none;
font-size: 15px;
font-weight: bold;
}
#menubar ul li a:hover{
border-bottom: 2px solid #ffffff;
}
#container{
width: 1200px;
height: 1400px;
}
#leftmenu{
position: fixed;
margin-top: 123px;
margin-left: 50px;
padding-top: 20px;
float: left;
width: 160px;
height: 350px;
list-style: none;
background: rgba(0,0,0,0.8);
color: #ffffff;
border-left: 2px solid #010000;
border-right: 2px solid #010000;
}
#leftmenu ul li{
display: block;
padding-bottom: 50px;
}
#leftmenu ul li a{
font-weight: bold;
text-decoration: none;
color: #ffffff;
font-size: 15px;
text-align: center;
}
#leftmenu ul li a:hover{
border-bottom: 2px solid #ffffff;
transition: opacity .5s ease-in;
opacity: 1;
}
#triangle{
margin-top: 12px;
margin-left: -1px;
width: 0px;
height: 0;
border-top: 80px solid rgba(0,0,0,0.8);
border-left: 82px solid transparent;
border-right: 82px solid transparent;
}
#content{
text-align: left;
margin-left: 100px;
width: 1000px;
padding-top: 150px;
padding-left: 160px;
color: #000000;
font-weight: bold;
text-align: center;
font-size: 15px;
}
.slider{
margin-top: 20px;
width: 600px;
height: 400px;
overflow: hidden;
margin: auto;
border-radius: 10px;
vertical-align: middle;
}
.shadow{
background-image:url(../images/shadow.png);
background-repeat: no-repeat;
background-position: top;
width: 850px;
height: 144px;
vertical-align: middle;
margin-top: -50px;
}
.slider img{
width: 600px;
height: 400px;
display: none;
}
.borderbottom{
border: 6px solid rgba(0,0,0,0.8);
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
width: 1000px;
position: fixed;
margin-top: 20px;
}