Автор

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

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


 

В данной заметке представляю весьма элегантный способ это сделать. Реализация с помощью небольшого скрипта 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



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

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

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


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

Я уверен, что вы часто видели на различных веб-сайтах необычные эффекты при переходе между страницами, большинство из них создавалось с помощью JavaScript. В этом уроке я покажу, как вы можете создать свой собственный эфект перехода, но вместо JavaScript я буду использовать CSS Transition и свойство :target.


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

Стало известно, что новая операционная система windows будет отличатся от своих предшественниц футуристическим дизайном меню пуск, и отсутствие кнопки вызова в низу панели задач, это весьма насторожило, ведь прежние удобства стали недоступны и приходится переучиваться, но есть и поклонники данного нововведения. Безусловно, что новый пуск стал весьма эффектно смотреться, появились новые возможности и естественно инновация в нестандартном оформлении. Не успела данная операционная система толком выйти, как появились интересные решение.


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

Простой шаблон для демонстрации возможностей вашего приложения с помощью плавной 3d-анимации, основанной на CSS и jQuery.


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

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


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

Надёжный хостинг

С нами хостинг удобен и прост, как диван у вас дома. Вы с комфортом размещаетесь, а все внутренние пружины мы берем на себя.

Бесплатный тестовый период, ежедневные бэкапы, неограниченный трафик, акции с бонусами... Конечно, у нас все это есть.


Перейти на хостинг

О КОМПАНИИ

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

Close

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


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

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

Close