Я думаю, что многие уже поняли о чем речь. Если нет, прокрутите эту страницу немного вниз, а потом нажмите на стрелку в левом верхнем углу. Такую анимацию очень просто создать при помощи JQuery.
Первым делом, создадим подключаемый JavaScript-модуль
main.js
$(document).ready(function(){
// hide #back-top first
$("#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
}, 600);
return false;
});
});
});
Собственно, этот код и реализует анимацию. Если нужно изменить скорость анимации, меняем значение 600 (перед return) на любое другое в миллисекундах. Не забываем подключать JQuery.
Теперь нужно создать элемент для самой кнопки.
button.html
<section id="back-top">
<a href="#top"><span></span></a>
</section>
Осталось только навести красоту с помощью css.
style.css
#back-top {
position:fixed;
top: 20px;
left: 20px;
}
#back-top a {
display:block;
text-align:center;
font: 12px Arial, Verdana, Tahoma, sans-serif;
text-transform:uppercase;
text-decoration:none;
color: #333;
}
#back-top a:hover {
color:#000;
}
#back-top span {
display: none;
width:47px;
height:47px;
display:block;
margin-bottom:7px;
background:url(../images/back-top-button.png) no-repeat center center
}
Готовая web страница с кнопкой
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Back on top button test</title>
<style>
body {
/* For test this script on blank page */
min-height: 3000px;
}
#back-top {
position: fixed;
top: 20px;
left: 20px;
}
#back-top a {
display: block;
text-align: center;
font: 12px Arial, Verdana, Tahoma, sans-serif;
text-transform: uppercase;
text-decoration: none;
color: #333;
}
#back-top a:hover {
color: #000;
}
#back-top span {
display: none;
width: 47px;
height: 47px;
display: block;
margin-bottom: 7px;
background: url(back-top-button.png) no-repeat center center
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
// hide #back-top first
$("#back-top").hide();
// fade in #back-top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 200) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
// scroll body to 0px on click
$('#back-top a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 600);
return false;
});
});
});
</script>
</head>
<body>
<section id="back-top">
<a href="#top"><span></span></a>
</section>
</body>
</html>
Изображение для самой кнопки здесь, а архив с исходниками тут.
Комментарии к статье: 7
Возможность комментировать эту статью отключена автором. Возможно, во всем виновата её провокационная тематика или большое обилие флейма от предыдущих комментаторов.
Если у вас есть вопросы по содержанию статьи, рекомендуем вам обратиться за помощью на наш форум.