Non so come far mostrare i div nascosti con il plug-in animatescroll e jquery al click sul link:
qui l'html:
codice:
<!doctype html><html>
<head>
<meta charset="UTF-8">
<title>Super Super Test</title>
<link href="css/Super Test.css" rel="stylesheet" type="text/css">
<script src="jquery-2.1.0.min.js"></script>
<script src="animatescroll.js"></script>
<style type="text/css">
body {
background-color: #CCC;}
</style>
</head>
<body>
<div id="pagina">
<div id="home">
<h1> TEST prima pagina </h1>
Questa è prima
<hr>
<h1><a onclick="$('#articolo').animatescroll({scrollSpeed:2000,easing:'easeOutQuint'});">Avanti ></a></h1>
</div>
<div id="articolo">
<h1> TEST seconda pagina </h1>
Questa è la seconda
<hr>
<h1><a onclick="$('#home').animatescroll({scrollSpeed:2000,easing:'easeOutQuint'});"> < Indietro</a></h1>
<h1><a onclick="$('#footer').animatescroll({scrollSpeed:2000,easing:'easeOutQuint'});">Avanti ></a></h1>
</div>
<div id="footer">
<h1> TEST terza pagina </h1>
Questo è la terza
<hr>
<h1><a onclick="$('#home').animatescroll({scrollSpeed:2000,easing:'easeOutQuint'});"> < Indietro</a></h1>
</div>
</div>
</body>
</html>
qui il CSS:
codice:
#pagina { width: 800px;
height: 800px;
overflow:hidden;}
#pagina #home {
width: 800px;
height: 800px;
background-color: #2e9422;
}
#pagina #articolo {
width: 800px;
height: 800px;
background-color: #e74c3c;
}
#pagina #footer {
width: 800px;
height: 800px;
background-color: #fffb82;
}
a {
text-decoration: none;
cursor: pointer;
}
h1 {
width: 300px;
display: inline-block;
}