Dobry wieczór,
Coś mi nie działa, chcę dodać przycisk przewijania strony do góry wszystko jest okej tylko jakby tego skryptu nie wczytuje bo nic nie przewija, co jest zrobione nie tak?
html
<!DOCTYPE HTML>
<html lang="pl">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="author" content="PROFF"/>
<title>Pasja Informatyki</title>
<meta name="description" content="Pasja informatyki, nauka, programowanie, html"/>
<meta name="keywords" content= "www,html,pasja,informatyki"/>
<link rel="stylesheet" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="jquery.scrollTo.min.js"></script>
<script>
$(function(){
$(window).scroll(function() {
if ($(window).scrollTop() > 100) {
$('.scrollTopButton').addClass('show');
} else {
$('.scrollTopButton').removeClass('show');
}
});
$('.scrollTopButton').click(function() {
$('body').animate({scrollTop: 0}, 400, 'linear');
});
});
</script>
</head>
<body>
<div id="container">
<div id="logo"><a class="logo1" href="index.html"><img src="img/logo.png"></a></div>
<div id="blok">
<p>Witaj na proff-page.000webhostapp.com! Strona została stworzona na potrzeby mojej nauki pisania w języku HTML i CSS, oraz obsługi baz danych. Życz mi powodzenia! :) </p>
</div>
<nav>
<div id="menu">
<ol>
<li><a href="index.html">Start</a></li>
<li><a href="#">O mnie</a> <ul>
<li><a href="kimjestem.html">Kim Jestem?</a></li>
<li><a href="quiz.html">Quiz</a></li>
</ul>
</li>
<li><a href="kontakt.html">Kontakt</a></li>
<li><a href="conowego.html">Co nowego?</a></li>
</ol>
</div>
</nav>
<main>
<div class="content">
<p ><div class="mottojpg"><img src="img/motto.jpg"></div><div class="motto">"Znajdź pracę którą pokochasz, a nie przepracujesz ani jednego dnia w swoim życiu." - Konfucjusz</div></p><br><br><br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce placerat vehicula dolor, quis tempor purus egestas eget. Vivamus luctus felis sit amet tortor condimentum sollicitudin. Nulla facilisi. Ut dictum ornare justo, laoreet laoreet massa aliquam in. Proin efficitur felis quis sapien sagittis posuere non nec sapien. Donec at convallis urna. Curabitur faucibus turpis sit amet arcu volutpat, a pellentesque velit tempus. Ut porttitor tristique pulvinar. Donec a luctus ante. Nulla tristique lorem vestibulum lectus mattis, sit amet auctor erat suscipit. Vivamus condimentum felis et massa rhoncus tincidunt. Aliquam a velit et velit vehicula pellentesque eget a lacus. Fusce eu faucibus risus, a congue risus. Maecenas rhoncus libero sit amet nunc finibus, sit amet egestas elit vulputate. Suspendisse auctor viverra felis, id bibendum augue accumsan suscipit.</p>
<p>Maecenas nec est interdum, imperdiet turpis at, convallis quam. Aenean pellentesque laoreet urna, vel lobortis felis aliquet viverra. Nulla facilisi. Suspendisse volutpat congue nisl ut fringilla. Proin suscipit justo orci, vel varius nibh dignissim ut. Integer non magna lacus. Sed ac purus vitae libero congue efficitur. In non mauris id mi semper convallis. Ut feugiat pulvinar est id varius. Ut eu libero malesuada, vestibulum sem sit amet, efficitur lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
<p>Morbi a consectetur turpis. Donec finibus bibendum diam, eget ullamcorper augue porttitor eu. Donec luctus arcu vel nisi tempor sollicitudin. In hac habitasse platea dictumst. Mauris leo erat, elementum eu hendrerit vitae, pharetra vel eros. Phasellus accumsan felis enim. Nam vehicula ex vitae sem facilisis vestibulum. Praesent ac lorem a nibh commodo mollis.</p>
<p>Aliquam at neque in enim euismod auctor nec vel nunc. Suspendisse sed efficitur libero. Vivamus volutpat vulputate turpis pharetra venenatis. Pellentesque et porta massa, sit amet dignissim ante. Maecenas laoreet lorem a mi eleifend, in lacinia ante rutrum. Nam id convallis arcu. Sed a cursus diam. Maecenas convallis metus a ligula vehicula, eu sodales nulla bibendum. Aenean egestas consectetur nibh quis facilisis. Aliquam venenatis risus eu libero maximus, vel gravida tellus vulputate.</p>
<p>Fusce vehicula fermentum nisl in mollis. Nulla sed ex in libero consequat imperdiet. Praesent leo mi, egestas eget lobortis in, elementum in massa. Mauris tincidunt tempus leo, ut imperdiet nibh efficitur in. Pellentesque sed orci sit amet velit porta elementum eu ut ipsum. Integer id eleifend ex. Suspendisse ac lorem posuere, placerat elit sed, auctor felis. Vivamus elementum odio dolor, sit amet finibus mauris tristique a. Morbi pharetra odio sit amet dapibus pellentesque. Proin luctus arcu vitae faucibus consequat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque at odio a nisl vestibulum egestas at vel nisi. Curabitur hendrerit at mauris quis maximus. Maecenas condimentum augue ipsum, eu bibendum erat pharetra quis.</p>
</div>
</main>
</div>
<span class="scrollTopButton"></span>
<footer>
<div class="info">
Wszelkie prawa zastrzeżone © 2018 dziękuję za wizytę!
</div>
</footer>
</body>
</html>
css
body
{
background-color: #1F1F1F;
font-family: 'Quicksand', sans-serif;
}
#container
{
width: 1200px;
margin-left: auto;
margin-right: auto;
}
#logo
{
margin-top: 70px;
background-color:#F6F6F6;
text-align: center;
}
.content
{
background-color: #114400;
color: white;
margin-top: 80px;
padding: 60px;
-webkit-box-shadow: 0px 0px 31px 7px rgba(237,234,237,1);
-moz-box-shadow: 0px 0px 31px 7px rgba(237,234,237,1);
box-shadow: 0px 0px 31px 7px rgba(237,234,237,1);
border-radius: 10px
}
a:link
{
text-decoration:none;
color: white;
}
a:visited
{
text-decoration:none;
color: white;
}
a:hover
{
text-decoration:none;
color: white;
}
a.logo1:link {text-decoration:none;}
a.logo1:visited {text-decoration:none;}
a.logo1:visited {text-decoration:none;}
a.logo1:hover {text-decoration:none;}
.info
{
background-color: #303030;
height: 25px;
color: grey;
text-align: center;
width: 90%;
margin: 25px auto auto auto;
}
#menu
{
padding: auto;
text-transform: uppercase;
background-color: #303030;
color: #ffffff;
margin: auto;
width: auto;
text-align: center;
line-height:200%;
height: 36px;
}
ol {
list-style-type:none;
padding:0;
margin: 25px auto auto auto;
font-size:18px;
height:2em;
line-height:2em;
text-align:center;
background-color: #303030;
}
ol > li {
float:left;
width:198px;
margin-left:1px;
background-color: #303030;
border-right:1px solid #1F1F1F;
}
ol > li:first-child {
margin-left:0;
}
ol > li > ul > li > a {
border-top:1px solid #1F1F1F;
}
ol a {
display:block;
color:#000;
text-decoration:none;
padding:0 5px;
}
ol > li > a:hover {
color:white;
}
ol > li:hover {
background-color:#404040;
}
ol > li > ul {
list-style-type:none;
padding:0;
margin:0;
}
ol > li > ul > li {
background-color:#303030;
}
ol > li > ul > li:hover {
background-color:#505050;
}
ol > li > ul {
display:none;
}
ol > li:hover > ul {
display:block;
}
ol > li:hover > a {
color:#66FFFF;
}
/* Ruchomy tekst pod logiem*/
#blok {
position:relative;
width:300px;
height:2.2em;
line-height:2.2em;
margin:0 auto;
border:1px solid #1F1F1F;
font-size:12px;
background-color:#303030;
overflow:hidden;
color: white;
}
#blok > p {
position:absolute;
margin:0;
white-space:nowrap;
animation:przesun 30s linear infinite;
-webkit-animation:przesun 30s linear infinite; /* dla Google Chrome, Safari, Opera 15+ */
}
#blok > p:hover {
animation-play-state:paused;
-webkit-animation-play-state:paused;
}
/* ------------ANIMACJA-PRZESUN------------ */
@keyframes przesun
{
0% { transform:translateX(0); padding-left:105%; }
100% { transform:translateX(-100%); padding-left:105%; }
}
@-webkit-keyframes przesun /* dla Google Chrome, Safari, Opera 15+ */
{
0% { -webkit-transform:translateX(0); padding-left:105%; }
100% { -webkit-transform:translateX(-100%); padding-left:105%; }
}
.motto
{
font-size: 12px;
text-align: center;
}
.mottojpg
{
width: 550px;
height: 340px;
display: block;
margin-left: auto;
margin-right: auto;
overflow: hidden;
border-radius: 12px;
}
.mottojpg img
{
transition: all 0.5s ease-in-out;
}
.mottojpg:hover img
{
-webkit-transform: scale(1.15);
-ms-transform: scale(1.15);
transform: scale(1.15);
}
.scrollTopButton {
width: 40px;
height: 40px;
position: fixed;
visibility: hidden;
overflow: hidden;
z-index: 99999999;
background-image: url('img/up.png');
right: 25px;
bottom: 35px;
transition: all 0.5s ease-in-out;
}
.scrollTopButton.show {
visibility: visible;
cursor: pointer;
transition: all 0.5s ease-in-out;
}
Coś jest źle podpięte czy o co chodzi?
Chce żeby realizowany był ten skrypt :
<script>
$(function(){
$(window).scroll(function() {
if ($(window).scrollTop() > 100) {
$('.scrollTopButton').addClass('show');
} else {
$('.scrollTopButton').removeClass('show');
}
});
$('.scrollTopButton').click(function() {
$('body').animate({scrollTop: 0}, 400, 'linear');
});
});
</script>
ten plik jqueryscrollto mam w katalogu tam gdzie index, potrzebny mi on do tego w ogóle?
