Cześć wszystkim.
Mam taki problem, stworzyłem stronę internetową w której płynne przewijanie w menu.
Ma przesuwać do pod strony. Kiedy wrzucam na serwer stronę, to płynne przewijanie nie działa, a gdy przeglądam ja na swoim lokalnym komputerze to przewijanie w menu działa prawidłowo. Nie rozumiem, dlaczego tak się dzieje
LINK DO STRONY www.arkomadi.pl
POMOCY
tu podaje kod html
<!DOCTYPE HTML>
<html lang="pl">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Arkomadi- Portfolio</title>
<meta name="description" content="portfolio webowe Arkadiusz Madera tworzenie stron www zgodnie z standardem html5 css3 organizacji W3C ">
<meta name="keywords" content="programowanie,strony www,pasja ,informatyka html5,css,css3,koder,Arek Madera">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="css/fontello.css">
<link href="https://fonts.googleapis.com/css?family=Lato&subset=latin-ext" rel="stylesheet">
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-94022302-1', 'auto');
ga('send', 'pageview');
</script>
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
<![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="jquery.scrollTo.min.js"></script>
<script>
jQuery(function($)
{
//zresetuj scrolla
$.scrollTo(0);
$('#link1').click(function() { $.scrollTo($('#kontakt'), 2000); });
$('#link2').click(function() { $.scrollTo($('#oferta'), 2000); });
$('#link3').click(function() { $.scrollTo($('#o-mnie'), 2000); });
$('#link4').click(function() { $.scrollTo($('#projekty'), 2000); });
$('#link5').click(function() { $.scrollTo($('#top'), 2000); });
$('.scrollup').click(function() { $.scrollTo($('body'), 2000); });
}
);
//pokaż podczas przewijania
$(window).scroll(function()
{
if($(this).scrollTop()>300) $('.scrollup').fadeIn();
else $('.scrollup').fadeOut();
}
);
</script>
</head>
<body id="top">
<header class="page-header">
<div class="scrollup"></div>
<section class="menu">
<a href="index.html"><img src="img/logo.png"></a>
<div style="clear:both";></div>
</section>
<nav class="menu-links">
<ul>
<li><a id="link1" href="#">Kontakt</a></li>
<li><a id="link2" href="#">Moja oferta </a></li>
<li><a id="link3" href="#">O mnie </a></li>
<li><a id="link4" href="#">soc</a></li>
<li><a id="link5" href="#">Strona główna</a></li>
<div style="clear:both";></div>
</ul>
</nav>
</header>
<main>
<article>
<section >
<div class="container">
<header>
<h1 id="projekty">projekty</h1>
</header>
<div class="photo">
<figure>
<a href="szablony/01/index.html" target="_blank"><img src="szablony/01/img/1.jpg" alt=""></a>
</figure>
<figcaption>kliknij na szablon 1</figcaption>
</div>
<div class="photo">
<figure>
<a href="szablony/02/index.html" target="_blank"><img src="szablony/02/img/2.jpg" alt=""></a>
</figure>
<figcaption>kliknij na szablon 2 </figcaption>
</div>
<div class="photo">
<figure>
<a href="szablony/03/index.html" target="_blank"><img src="szablony/03/img/3.jpg" alt=""></a>
</figure>
<figcaption>kliknij na szablon 3</figcaption>
</div>
<div class="photo">
<figure>
<a href="szablony/04/index.html" target="_blank"><img src="szablony/04/img/4.jpg" alt=""></a>
</figure>
<figcaption>kliknij na szablon 4 </figcaption>
</div>
<div class="photo">
<figure>
<a href="szablony/05/index.html" target="_blank"><img src="szablony/05/img/5.jpg" alt=""></a>
<figcaption>kliknij na szablon 5 </figcaption>
</figure>
</div>
</div>
</section>
<section>
<div class="container">
<header>
<h1 id="o-mnie">o mnie</h1>
</header>
<div class="myimg">
<img src="img/about.jpg" alt="Arkadiusz madera autor witryny ">
</div>
<div class="mytxt">
Nazywam się Arkadiusz Madera.
Od kilku lat interesuję się tworzeniem stron internetowych, które tworzę w oparciu
o podstawowe oraz najbardziej znane technologie jakimi są html i css.
Swoją pierwszą stronę internetową stworzyłem w 2006r, a ich kreowanie to niezwykle ciekawe i rozwijające hobby.
Mam nadzieję, że tym krótkim wpisem zachęciłem Państwa do zapoznania się z moim portfolio webowym.
Pozdrawiam Arkadiusz Madera
</div>
</div>
</section>
<section>
<div class="container">
<header>
<h1 id="oferta">oferta</h1>
</header>
<ol>
<li>
WYKONYWANIE STRON WWW, W TECHNOLOGII HTML5, CSS, CSS3.
</li>
<li>
TWORZENE PROJEKTÓW, ELEGANCKICH ORAZ PRZYJAZNYCH DLA UŻYTKOWNIKÓW.
</li>
<li>
MOŻLIWOŚĆ PRZEBUDOWY JUŻ GOTOWEJ STRONY ZGODNIE Z PAŃSTWA OCZEKIWANIAMI
</li>
</ol>
</div>
</section>
<section class="sociallink">
<div class="container">
<header>
<h1 id="kontakt">zapraszam na :</h1>
</header>
<a href="https://plus.google.com/114028728965516519590" target="_blank"> <i class="icon-gplus"></i></a>
<a href="https://twitter.com/arekmadera?lang=en" target="_blank"><i class="icon-twitter"></i></a>
<a href="https://web.facebook.com/?_rdc=1&_rdr" target="_blank"><i class="icon-facebook"></i></a>
</div>
</section>
<section>
<div class="container">
<header>
<h1 id="kontakt">kontakt</h1>
</header>
<div id="formularz">
<form method="post" action="kontakt.php">
<label>Imię i nazwisko</label>
<input name="name" placeholder="podaj swoje imię i nazwisko" required>
<label>podaj tel</label>
<input type="tel" name="tel" placeholder="601-102-203" pattern="[0-9]{3}-[0-9]{3}-[0-9]{3}" required>
<label>Email</label>
<input name="email" type="email" placeholder="podaj swój email" required>
<label>Wiadomość</label>
<textarea name="message" placeholder="Napisz tu wiadomość" required></textarea>
<input id="submit" name="submit" type="submit" value="Wyślij">
</form>
</div>
</div>
</section>
</article>
<footer>
2017 © Arkadiusz Madera-Programista webowy zapraszam do współpracy.
<a href="mailto:kontakt@arkomadi.pl" class="mail">kontakt@arkomadi.pl</a>
</footer>
</main>
</body>
</html>
kod css
*
{
margin:0; padding:0;
}
body
{
font-size:24px;
margin:0;
padding:0;
font-family: 'Lato', sans-serif;
background-color:#336633;
}
/*
.page-header
{
position:fixed;
left:0px;
right:0px;
top:0px;
z-index:100px;
}
*/
.menu
{
float:left;
margin-left:10px;
padding: 10px;
}
.menu-links ul
{
background-color:#222222;
list-style:none;
}
.menu-links li
{
display:inline-block;
float:right;
padding:10px;
}
.menu-links li a
{
text-decoration:none;
color:#fff;
background-color:#3b3b3b;
text-align: center;
display:block;
margin:10px;
padding: 10px;
}
.menu-links li a:hover
{
background-color:#FF2222;
}
.sociallink
{
text-align: center;
}
.container
{
margin-right:auto;
margin-left:auto;
width:1000px;
color:#CCCCCC;
background-color:#2b2b2b;
padding:80px;
margin-top:20px;
margin-bottom:20px;
border-radius:20px;
}
h1
{
margin-bottom:40px;
text-align: left;
border-bottom: 2px dashed #FF3333;
text-transform: uppercase;
}
footer
{
background-color:#222222;
padding:40px;
color:#CCCCCC;
text-align:center;
font-size:30px;
}
a.mail
{
color:#FF8822;
text-decoration:none;
}
a.mail:hover
{
color:#fff;
background-color:#3b3b3b;
}
.myimg img
{
width:234px;
height:248px;
border-radius:10px;
}
.myimg
{
display:inline-block;
width:140px;
margin-right:100px;
}
.mytxt
{
display:inline-block;
width:590px;
}
.photo
{
display: inline-block;
text-align: center;
margin: 10;
padding: 0;
}
.scrollup
{
width: 60px;
height: 60px;
text-decoration: none;
background: url("img/up.png") no-repeat 0px 0px;
position: fixed;
right: 50px;
bottom: 50px;
display: none;
cursor: pointer;
}
.photo img
{
width: 397px;
margin: 10px;
margin-bottom: 10px;
border-radius: 10px;
}
ol
{
list-style-type:none;
}
ol > li
{
margin-right:20px;
margin-top:20px;
font-size:22px;
}
ol >li:before
{
content:"â";
}
#formularz {
width:1000px; /* ustawiamy szerokoĹÄ formularza */
margin:0 auto; /* jeĹźeli nasz formularz ma ustawionÄ
szerokoĹÄ wyĹrodkowujemy go */
background-color:#2b2b2b; /* dodajemy kolor tĹa naszemu formularzowi */
border:2px solid #FF3333; /* dodajemy obramowanie o szerokoĹci 2px */
border-radius:10px; /* zaokrÄ
glamy tĹo naszego formularza */
padding:20px; /* dodajemy margines wewnÄ
trz naszego formularza */
margin-top:20px; /* dodajemy margines gĂłrny naszego formularza */
}
#formularz label {
display:block;/* ustawiamy by label rozpoczynaĹ siÄ od nowej linii*/
margin-bottom:5px;/* dodajemy margines dolny */
font-weight:bold; /* pogrubiamy czcionkÄ */
text-transform: uppercase; /* zamieniamy wszystkie litery na duĹźe */
font-size:22px; /* ustawiamy wielkoĹÄ czcionki */
color:#ddd; /* ustawiamy kolor czcionki */
}
#formularz textarea,
#formularz input {
padding:25px; /* dodajemy margines wewnÄ
trz naszego pola */
border-radius:3px; /* dodajemy zaokraglone rogi */
border:1px solid #ccc; /* dodajemy obramowanie */
margin-bottom:25px; /* dodajemy margines dolny */
width:950px; /* ustalamy szerokoĹÄ */
}
#formularz input#submit {
width:1000px; /* ustalamy szerokoĹÄ */
cursor:pointer; /* zmieniamy kursor */
margin-bottom:0px;/* resetujemy margines dolny */
background-color:#4b4b4b;
color:#fff;
font-size:22px;
text-transform:uppercase;
}
#formularz input#submit:hover
{
background-color: #FF3333;
}
#formularz p.copy {
color:#dddddd; /* ustawiamy kolor czcionki */
margin-bottom:0px; /* resetujemy margines dolny */
font-size:20px; /* ustawiamy rozmiar czcionki */
text-align:center; /* wyĹrodkowywujemy tekst */
}
#formularz p.copy a {
color:#dddddd;/* ustawiamy kolor czcionki */
text-decoration: none; /* usuwamy podkreĹlenie linku */
font-weight:bold; /* pogrubiamy czcionkÄ */
}
P{
text-align:center;
margin-bottom:20px;
color: #dddddd;
}
