анимированная кнопка "Вверх"

Кнопка «Вверх» с плавной прокруткой страницы на jQuery

Опубликовано: 01.02.2015 12:21
Просмотров: 1842

Урок по созданию кнопки "Вверх" с плавной прокруткой страницы на jQuery + исходные коды и пример

На мой взгляд кнопка "Вверх" просто незаменима и я мне трудно представить более-менее хороший сайт без нее. Очень удобно пробежавшись до низа статьи всего в один клик взлететь до самого верха страницы. Скрипт, который я хочу вам показать отличается минималистичным дизайном, который подойдет любому сайту. Кнопка "вверх" имеет плавную прокрутку, которая реализована при помощи jQuery. И, конечно, кнопка будет показывать только если пользователь проскролил страничку вниз.

демо

Оформление кнопочки

HTML

1
2
3
<p id="back-top">
    <a href="#top"><span></span>Вверх</a>
</p>

Итого, мы создали абзац с идентификатором и тег span, в котором будет храниться наша кнопка.

CSS

Займемся кодом CSS-файла.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
#back-top {
        /* нижний отступ */
	bottom: 28px; 
  	/* кнопка будет скролиться вместе со страницей */
	position: fixed;
        /* отступ от правго края экрана */
	margin-left: -149px; 
}
#back-top a {
  	/* внешний вид кнопки */
  	-webkit-transition: 1s;
  	display: block;
-moz-transition: 1s; width: 107px; text-align: center; text-decoration: none;    font: 12px/100% Arial; color: #bbb; transition: 1s; } #back-top a:hover {    /* при наведении на кнопку */ color: #000; } #back-top span {    /* стрелочка */    -webkit-transition: 1s; width: 107px;
-moz-transition: 1s; height: 107px; display: block; margin-bottom: 8px;    /* путь до иконки, которую вы хотите разместить */ background: #ddd url(img.jpg) no-repeat center center;  transition: 1s; /* закругления для углов  */    -moz-border-radius: 14px; -webkit-border-radius: 14px; border-radius: 14px;   } #back-top a:hover span { background-color: #778; }

Основа готова (должно получиться как здесь), но сейчас прокрутка работает быстро, нет плавного эффекта. Его мы добавим при помощи jQuery.

Код для кнопки "Вверх"

jQuery

Данный скрипт скрывает кнопочку, а затем при скролле проверяет прокручена ли страница на 100px или нет. Если страница прокручена, то кнопка "Вверх" появляется, иначе скрывается. По клику на кнопку скрипт красивенько так прокручивает страничку в начало.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
 
<script>
$(document).ready(function(){
	// сначала скроем кнопку
	$("#back-top").hide();
 
	// событие скролла
	$(function () {
		$(window).scroll(function () {
			// покажем кнопку если высота до верха экрана больше 100px
			if ($(this).scrollTop() > 100) {
				$('#back-top').fadeIn();
			} else {
				$('#back-top').fadeOut();
			}
		});
 
		// по клику страница перематывается на начало
		$('#back-top a').click(function () {
			$('body,html').animate({
				scrollTop: 0
			}, 799);
			return false;
		});
	});
 
});
</script>

скачать

  • Комментарии не найдены

Оставьте свой комментарий

Оставить комментарий от имени гостя

0 / 2000 Ограничение символов
Ваш текст должен быть в пределах 10-2000 символов
Ваш комментарий будет отправлен на модерацию