Автор

09 04.2013
Плавная прокрутка вверх и вниз страницы

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


 

В данной заметке представляю весьма элегантный способ это сделать. Реализация с помощью небольшого скрипта jQuery, который позволяет плавно прокрутить страницу как вверх, так и вниз. Плюс простое решение на CSS для кнопок "Вверх" и "Вниз", без картинок.

Дынный скрипт хорош тем, как и плагин с предыдущей статьи на эту тему, что когда страница поднята вверх - кнопка "Вверх" скрыта, когда внизу - скрыта кнопка "Вниз", причем параметры высоты, на которой появляются кнопки регулируется.

 

Для демонстрации просто посмотрите в правый нижний угол данной страницы!

 

Итак, все что нам нужно, это две строки HTML кода, они и будут нашими кнопками:

<div class="go-up" title="Вверх" id='ToTop'>⇧</div>
<div class="go-down" title="Вниз" id='OnBottom'>⇩</div>

 

Как видите, для реализации стрелок - указателей направления прокрутки, мы не используем картинок, они реализованы с помощью спецсимволов юникода, которые просто копируются и вставляются.

При использовании спецсимволов нужно сделать две проверки:
1) проверить данный символ на кроссбраузерность - отображается ли он во всех браузерах (бывает, что нет);
2) проверить кодировку своего сайта - должна быть UTF-8;

 

Эти строки размещаем где удобно в коде шаблона.
Желаемый внешний вид и расположение на сайте придается с помощью CSS. вот пример с демонстрационной страницы:

.go-up,
.go-down {
  display:none;
  position: fixed; /*позиционируем*/
  right: 5px; /*указываем положение, если слева - left*/
  z-index: 9999; /*показываем поверх все элементов на странице*/
  background: #4F4F4F;
  border: 2px solid #ccc; /*толщина, стиль, цвет рамки*/
  box-shadow: 0 10px 0.3em -0.1em rgba(0,0,6,0.5); /*тень*/
  border-radius: 10px;
  cursor: pointer;
  color: #fff; /*цвет стрелок*/
  text-align: center; /*выравнивание*/
  font-size: 42px; /*размер стралок*/
  text-shadow: 0 1px 2px #000, 0 0 10px #E0F1FF;
  opacity: .7; /*прозрачность*/
  padding: 0 3px 5px 3px; /*отступы внутри*/
  margin-bottom: 5px; /*отступ снизу (можно не указывать)*/
  width: 48px; /*ширина кнопки*/
  height: 48px; /*высота кнопки*/
}
.go-up {
  bottom: 70px; /*положение от низа окна браузера*/
}
.go-down {
  bottom: 10px;
}
/*стили при наведении курсора*/
.go-down:hover,
.go-up:hover {
  opacity: 1;
}

 

И наконец "виновник торжества", сам скрипт jQuery

<script type='text/javascript'>
//<![CDATA[
$(function(){
 if ($(window).scrollTop()>="250") $("#ToTop").fadeIn("slow")
 $(window).scroll(function(){
  if ($(window).scrollTop()<="250") $("#ToTop").fadeOut("slow")
  else $("#ToTop").fadeIn("slow")
 });

 if ($(window).scrollTop()<=$(document).height()-"999") $("#OnBottom").fadeIn("slow")
 $(window).scroll(function(){
  if ($(window).scrollTop()>=$(document).height()-"999") $("#OnBottom").fadeOut("slow")
  else $("#OnBottom").fadeIn("slow")
 });

 $("#ToTop").click(function(){$("html,body").animate({scrollTop:0},"slow")})
 $("#OnBottom").click(function(){$("html,body").animate({scrollTop:$(document).height()},"slow")})
});
//]]>
</script>

 


Его можно разместить перед </head>, некоторые рекомендуют перед </body> тут уж выбор за вами.
Значение 250 в скрипте, показывает: в первой строке - кнопка появится когда страница будет прокручена больше чем на 250 пикселей, а во второй, что исчезнет когда до верха будет меньше чем 250 пикселей.

Вот и все, такой чудесный скрипт для кнопок прокрутки страницы :) Пробуем, делимся, радуемся.

Первоисточник www.magentawave.com


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru


Статьи по темеjQuery

28 12.2014
Плавная прокрутка вверх и вниз страницы

В данном уроке мы сделаем отличный слайдер CSS3. Он будет использовать эффект затухания между слайдами. Дополнительно можно использовать описание для каждого изображения. Для организации информации будет использоваться неупорядоченный список. Слайды будут переключаться автоматически с помощью анимаций CSS3.


06 06.2017
Плавная прокрутка вверх и вниз страницы

В последнее время мы экспериментировали с анимацией SVG. Сегодняшний урок показывает вам, как анимировать сразу несколько путей SVG, чтобы создать стильный фоновый эффект для модального окна.


18 01.2017
Плавная прокрутка вверх и вниз страницы

Профессиональный веб-дизайн не обходится без создания цветовой схемы. Во всемирной паутине существует множество инструментов для достижения цветовой «нирваны». Кажется, что они совершенно разные, но многие из них – всего лишь измененные версии более популярных и полезных инструментов.


13 05.2017
Плавная прокрутка вверх и вниз страницы

Чего вы можете добиться с помощью CSS 3D Transforms. Будут случаи, когда вы будете в полной мере использовать возможности CSS 3D. 


105 Публикаций

Раскрутка в соцсетях

В данном блоге описано где и как сделать накрутку групп, сообществ и личных страничек в популярных социальных сетях и тест платных сайтов занимающихся накруткой.


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close