Animowany scrolling na stronę w jQuery
Dziś pokażę Wam jak wykonać prosty, animowny scroll w jQuery. Taki scrolling jest przydatny, kiedy zjedziemy na dól strony i chcemy szybko powrócić na górę, to pojawia się nam ikonka scrollowania, klikamy na nią i jak windą jedziemy na samą górę 🙂
Strona składa się z plików:
index.html
style.css
Folderów:
images
script
W <head></head> dodajemy kod jQuery:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="script/scroll.js"></script>
Kod HTML scrolla:
<a href="#" class="scrollup">scroll</a>
Dodajemy na sam dół kodu html, może być przed ostatnim </div>.
Obrazek scrolla w katalogu images:
Kod css scrolla:
.scrollup {
width: 64px;
height: 64px;
position: fixed;
bottom: 50px;
right: 50px;
display: none;
opacity: 0.9;
text-indent: -9999px;
background: url(images/scrollup.png);
transition-duration: 0.2s;
transition-timing-function: linear;
}
.scrollup:hover {
opacity: 0.7;
}
W katalogu script znajduje się plik scroll.js z kodem:
$(document).ready(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 300) {
$('.scrollup').fadeIn();
} else {
$('.scrollup').fadeOut();
}
});
$('.scrollup').click(function () {
$("html, body").animate({
scrollTop: 0
}, 600);
return false;
});
});
Całość kodu html wygląda tak:
<!DOCTYPE html> <html lang="pl"> <head> <meta charset="utf-8"> <title>Scrolling</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta name="robots" content="index, follow" /> <meta name="description" content=""/> <meta name="keywords" content=""/> <meta name="author" content="www.tworzenie-stronek.pl" /> <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" /> <link rel="stylesheet" type="text/css" href="style.css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="script/scroll.js"></script> </head> <body> <div id="wrapper"> <div class="page"> <div id="top"> Witamy na stronie </div> </div> <div id="clear"></div> <div id="footer"> stopka </div> <a href="#" class="scrollup">scroll</a> </div> </body> </html>
Cały kod css w pliku style.css:
* { padding: 0; margin: 0; }
html, body {
font-family: Tahoma, sans-serif;
font-weight: 300;
width: 100%;
height: 100%;
font-size: 15px;
color: #000000;
margin: 0 auto;
}
a {outline: none; text-decoration: none; color: #000000;}
a:hover {text-decoration: underline; color: #000000;}
#wrapper {
margin: 0 auto -150px;
min-height: 100%;
position: relative;
}
#clear{
clear: both;
height: 150px;
}
.page {
margin: 0 auto;
}
#top{
float: left;
width: 100%;
min-height: 1200px;
padding-top: 5%;
position: relative;
}
#footer {
float: left;
width: 100%;
height: 130px;
padding-top: 20px;
bottom: 0px;
position: absolute;
text-align: center;
font-size: 13px;
background-color: #fcf7ed;
}
#footer a{
text-decoration: underline;
}
img
{
border: 0px;
}
.scrollup {
width: 64px;
height: 64px;
position: fixed;
bottom: 50px;
right: 50px;
display: none;
opacity: 0.9;
text-indent: -9999px;
background: url(images/scrollup.png);
transition-duration: 0.2s;
transition-timing-function: linear;
}
.scrollup:hover {
opacity: 0.7;
}
@media (min-width: 1581px) {
#wrapper{width:100%;}
.page{width:1180px;}
}
I mamy gotowy szablon strony ze scrollem.
Jak coś nie będzie jasne, to chętnie wytłumaczę 🙂
