Witam,
mam problem z kodem który znajduje się ponieżej. Niestety strona jedynie przeskakuje w miejsce o które chodzi ( po kliknięciu w gallery do galerii itp.) lecz niestety jedynie przeskakuje, brakuje animacji. Skrypt skopiowany z neta i dostosowany.
Oraz 2 pytanie czy można coś zrobić z tym że każdy div po przesunięciu się strony wchodzi pod manubar przez co jest obcięty?
Pozdrawiam
<!DOCTYPE html>
<html lang="pl">
<head>
<script src="jquery-3.2.1.js"></script>
<script src="jquery.scrollTo.js"></script>
<meta charset="UTF-8">
<title></title>
<scrpit>
$(document).ready(function() {
$('a[href^="#"]').on('click', function(event) {
var target = $( $(this).attr('href') );
if( target.length ) {
event.preventDefault();
$('html, body').animate({
scrollTo: target.offset().top -70
}, 1000);
}
});
});
</scrpit>
</head>
<link rel="stylesheet" href="pc.css"></link>
<body>
<div id="menubar">
<div style="width: 5%; float: left;">a</div>
<a href="#home"><h6>HOME</h6></a>
<a href="#about"><h6>ABOUT</h6></a>
<a href="#apartments"><h6>APARTMENTS</h6></a>
<a href="#gallery"><h6>GALLERY</h6></a>
<a href="#cracow"><h6>CRACOW</h6></a>
<a href="#contact"><h6>CONTACT</h6></a>
<div style="clear: both"></div>
</div>
<div style="float: left; width: 10%;">a</div>
<div id="page">
<div class="mpage" ID="home">home</div>
<div class="mpage" ID="about">about</div>
<div class="mpage" ID="apartments">apartments</div>
<div class="mpage" ID="gallery">gallery</div>
<div class="mpage" ID="cracow">cracow</div>
<div class="mpage" ID="contact">contact</div>
<div style="clear: both"
</div>
<script>
$(document).ready(function() {
});
</script>
</body>
</html>
html, body
{
min-width: 800px;
width: 100%;
height: 100%;
border: 0px;
padding: 0px;
margin: 0px;
}
#menubar
{
min-width: 800px;
text-align: center;
background-color: black;
height: 60px;
margin: 0px;
padding: 0px;
border: 0px;
position: fixed;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
z-index: 1;
}
.but
{
float: left;
width: 15%;
height: 20px;
background-color: cadetblue;
}
a
{
width: 15%;
float: left;
color: white;
text-decoration: none;
font-family: calibri;
}
#odst
{
height: 60px;
width: 100vw;
background-color: aqua;
clear: both;
}
#page
{
float: left;
width: 80vw;
height: 100%;
}
.mpage
{
height: 100vh;
background-color: darkkhaki;
border: 2px;
border-style: solid;
border-color: cadetblue;
}