Link in progress
Обо мне
Прокрутка страницы вверх jquery

scroll_to_top Пришли просьбы выложить скрипт «Прокрутка страницы вверх», так, как реализовано на проекте с моего портфолио проект grand-toys.com.ua.

Скрипт я сам не писал, где-то нашел на просторах Интернета, внес некоторые изменения, например анимацию. Заметьте, анимация написана на CSS3! Да да, именно. Захотел поэкспериментировать с CSS3. Результат меня более чем удовлетворил.

Добавляем на страницу сайта сами библиотеки JQuery между тегами HEADER:

1
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

При большом желании можно скачать и добавить библиотеки себе на хостинг.
Небольшой код, который собственно и двигает страницу вверх:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script type="text/javascript">
    $(function() {
    $(window).scroll(function() {
    if($(this).scrollTop() != 0) {
    $('#up').fadeIn();
    } else {
    $('#up').fadeOut();
    }
    });
    $('#up').click(function() {
    $('body,html').animate({scrollTop:0},600);
    });
    });
</script>

Что тут нужно знать:

1
2
3
4
5
6
7
1. $('#up').fadeIn(); и $('#up').fadeOut(); - это идентификатор, куда страница будет подниматься.
Например можно сделать так:
после
</header>

Вставить пустой блок с идентификатором up.
<div id="up"></div>
1
2
3
4
2. $('body,html').animate({scrollTop:0},600); - скорость анимации, тоесть с какой скоростью будет
прокручена страница вверх. Наверное не правильно сказать, что это скорость, это время, за которое
анимация должна закончиться.
В моем случае: ({scrollTop:0} – начать сразу же, и 600) – продолжительность анимации 600мс.

3. В стили дописать саму кнопку, у меня это шарик:
тут стиль самой кнопки:

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
#up {
display:none;
width:74px;
height:126px;
background:url("image/up.png") no-repeat; /* картинка  кнопки*/
text-align:center;
padding:5px;
position:fixed;
bottom:10px; /* отступы кнопки*/
right:10px; /* отступы кнопки*/
cursor:pointer;
opacity: 0.2;  /* минимальное значение прозрачности*/
transition: opacity 0.3s ease 0s; /*время анимации прозрачности*/
-webkit-transition: opacity 0.3s ease 0s;
animation: toggleOpacity 3s linear infinite;
-webkit-animation: toggleOpacity 3s linear infinite;
}
Анимация кнопки (движения вверх и в низ + прозрачность от 0.2 до 0.7)
@keyframes toggleOpacity {
50% { bottom: 35px; opacity: 0.7;}
}

Если навести на кнопку, прозрачность пропадает
#up:hover {
opacity: 1.0;
}

Пожалуй и все. Настроить под свои нужды очень легко. Работает у всех современных браузерах, но есть косяки в Сафари (не работает анимация движения вверх и в низ). При большом желании можно исправить.
С уважением, ProIN.

Добавить комментарий

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

Max quality, min price, min time expenditure
Send me a message to: work@glogla.net
Portfolio