moovix

Кнопка вверх или вернуться к началу: CSS и jQuery

Moovix » Блог » Кнопка вверх или вернуться к началу: CSS и jQuery

CSS

				
					#toTop {
width:100px;
border:1px solid #ccc;
background:#f7f7f7;
text-align:center;
padding:5px;
position:fixed;
bottom:10px; /* отступ кнопки от нижнего края страницы*/
right:10px;
cursor:pointer;
display:none;
color:#333;
font-family:verdana;
font-size:11px;
}
				
			

HTML

				
					<div id = "toTop"> ^ Наверх </div>
				
			

JavaScript

				
					<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
 
<script type="text/javascript">
 
$(function() {
 
$(window).scroll(function() {
 
if($(this).scrollTop() != 0) {
 
$('#toTop').fadeIn();
 
} else {
 
$('#toTop').fadeOut();
 
}
 
});
 
$('#toTop').click(function() {
 
$('body,html').animate({scrollTop:0},800);
 
});
 
});
 
</script>
				
			
Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Moovix » Блог » Кнопка вверх или вернуться к началу: CSS и jQuery

Есть вопрос? мы онлайн

Есть проект? Заполните бриф.

top