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

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

HIT

17.08.2015

4973

Очень нужная «фишка» на сайте — стрелка прокрутки вверх, особенно если страницы получаются довольно длинными, !особенно если на сайте нет прилепленного 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;}

Поделиться в соц. сетях:

  • Похожие записи
  • Комментарии
  • Вложения
Scrollspy jquery

Scrollspy jquery

Скрипт scrollspy jquery отслеживающий положение скрола, в котором мы находится в данный момент. Чаще всего это используется для изменения состояния меню, изменение фона, а также для каких-либо событий. Подключение скрипта Читать далее »

/
Модальное окно на jquery

Модальное окно на jquery

Создаем модальное (всплывающее) окно основанное на технологии jquery. Про подобное решение на чистом CSS читайте здесь. Принцип модального окна Вставляем в HEADER (выше всего контента), #backfon — это фон модального Читать далее »

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

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

Реализуем плавный переход по якорным ссылкам в рамках текущей страницы. Данный скрипт особенно хорош тем, что не добавляет в строке браузера приставки /#link. Script Скорость перехода может регулироваться. В предложенном Читать далее »

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

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

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