В этом уроке:
- Устанавливаем
кнопку "Вверх"; - Подгоняем расположение под свой сайт;
- Изменяем внешний вид.
В качестве примера, справа внизу при скроллинге страницы вниз появляется кнопка "Вверх".
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="favicon.ico" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title>Как установить кнопку "Вверх" для Вашего сайта?</title>
<!-- Your styles -->
<link rel="stylesheet" href="styles/style.css" />
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
<pre>
...
</pre>
<div id="back-top"><a href="#top" class="arrow" title="Вверх"><span></span></a></div>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="scripts/jquery.up.js"></script>
</body>
</html>/* styles/style.css */
#back-top {
z-index:9999;
position:fixed;
bottom:20px;
right:20px;
}
.arrow {
display:inline-block;
position:relative;
text-indent:-9999px;
width:60px;
height:60px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX_wtZeijgFLKQoq3Y5EURRZFxwBabxj19FcP5dkz5YbWn9Fi-TTNFpY9nrvRKACNTTTiykYReDn-1KjQgB8xeuAt5vRqiDk9K2A4tiwd9wDahBHI3QqUeDlHNuTxDJhvh4_mbMSJb8as/s120/Arrow_Up_sprite.png) no-repeat;
}
.arrow span {
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX_wtZeijgFLKQoq3Y5EURRZFxwBabxj19FcP5dkz5YbWn9Fi-TTNFpY9nrvRKACNTTTiykYReDn-1KjQgB8xeuAt5vRqiDk9K2A4tiwd9wDahBHI3QqUeDlHNuTxDJhvh4_mbMSJb8as/s120/Arrow_Up_sprite.png) no-repeat;
background-position:-60px 0;
}/* scripts/jquery.up.js */
$(document).ready(function() {
$("#back-top").hide();
$(function() {
$(window).scroll(function() {
if ($(this).scrollTop() > 200) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
$('#back-top a').click(function() {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
$(".arrow").find("span").hide().end().hover(function() {
$(this).find("span").stop(true, true).fadeIn();
}, function() {
$(this).find("span").stop(true, true).fadeOut();
});
});
});В предыдущих уроках я рассказывал про то:
→ Как установить кнопки социальных сетей Yandex.Share?
→ Как изменить внешний вид иконок Yandex.Share?
→ Как установить боковую панель с кнопками социальных сетей Yandex.Share?
