/ Сайтостроение / Scripts & jquery / Прокрутка страницы вверх и вниз

Прокрутка страницы вверх и вниз

HIT

17.08.2015

1368

Очень нужная «фишка» на сайте — стрелка прокрутки вверх, особенно если страницы получаются довольно длинными, !особенно если на сайте нет прилепленного header.

Вставляем в самый низ, перед wp_footer

<p id="Go_Top"><a href='#'>значок/иконка/текст</a></p>
<p id="Go_Bottom"><a href='#'><i class="fa fa-chevron-down"></i></a></p>

Скрипт

<script>

jQuery(function(){
$("#Go_Top").removeAttr("href");
if ($(window).scrollTop()>="250") $("#Go_Top").addClass("up")
$(window).scroll(function(){
if ($(window).scrollTop()<="250") $("#Go_Top").removeClass("up")
else $("#Go_Top").addClass("up")
});

$("#Go_Bottom").removeAttr("href");
if ($(window).scrollTop()<=$(document).height()-"999") $("#Go_Bottom").addClass("down")
$(window).scroll(function(){
if ($(window).scrollTop()>=$(document).height()-"999") $("#Go_Bottom").removeClass("down")
else $("#Go_Bottom").addClass("down")
});

$("#Go_Top").click(function(){
$("html, body").animate({scrollTop:0},"slow"); return false;
})
$("#Go_Bottom").click(function(){
$("html, body").animate({scrollTop:$(document).height()},"slow"); return false;
})
});

</script>

CSS

/*css кнопки прокрутка вверх и вниз*/

#Go_Top {
position: fixed;
right: 5%;
bottom: -70px;
z-index: 999;
transition: bottom .4s;
}

#Go_Bottom {
position: fixed;
right: 5%;
top: -70px;
z-index: 999;
transition: top .4s;
}

.up {bottom: 30px !important;}

.down {top: 30px !important;}

#Go_Top a, #Go_Bottom a {
display: block;
text-align: center;
-webkit-transition: .4s;
-moz-transition: .4s;
transition: .4s;
font-size: 25px;
padding: 5px;
background-color: coral;
color: white;
}

#Go_Top a:hover, #Go_Bottom a:hover {color: coral; background-color: white;}

Тэги:

Поделится информацией с друзьями

  • Похожие записи
  • Комментарии
  • Вложения
Создаем анимацию Scroll Down

Создаем анимацию Scroll Down

Для лэндингов часто используют анимацию в виде стрелки или колесика мышки, чтобы показать что можно (нужно) листать ниже. Создадим подобную анимацию с помощью css и jquery. Анимация колесика мышки Создадим Читать далее »

/
Плавный скроллинг колесом

Плавный скроллинг колесом

Сайт воспринимается более профессионально, если на нем реализована плавная прокрутка колесом. Все это надо поместить в подвал: скрипт, инициализация скрипта. <script src="<?php bloginfo('stylesheet_directory'); ?>/js/plugins-scroll.js"></script> <script> // Skroll-page $(document).ready(function() { //Chrome Читать далее »

Изменение объекта при скроллинге

Изменение объекта при скроллинге

Учимся использовать jquery эффекты при скроллинге. Данные эффекты чаще всего применяются на промо-страницах и лэндингах. ScrollMe Скрипт Scrollme состоит из одного файла с набором скриптов, подключаем его wp_enqueue_script( 'scrollme', get_template_directory_uri() Читать далее »

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

Пока нет комментариев. Будь первым!

Прокрутка страницы вверх и вниз
Скрипты и стили в записях
Рекомендации для васСкрипты и стили в записяхOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.