В данной заметке представляю весьма элегантный способ это сделать. Реализация с помощью небольшого скрипта jQuery, который позволяет плавно прокрутить страницу как вверх, так и вниз. Плюс простое решение на CSS для кнопок "Вверх" и "Вниз", без картинок.
Дынный скрипт хорош тем, как и плагин с предыдущей статьи на эту тему, что когда страница поднята вверх - кнопка "Вверх" скрыта, когда внизу - скрыта кнопка "Вниз", причем параметры высоты, на которой появляются кнопки регулируется.
Для демонстрации просто посмотрите в правый нижний угол данной страницы!
Итак, все что нам нужно, это две строки HTML кода, они и будут нашими кнопками:
<div class="go-up" title="Вверх" id='ToTop'>↑</div>
<div class="go-down" title="Вниз" id='OnBottom'>↓</div>
Как видите, для реализации стрелок - указателей направления прокрутки, мы не используем картинок, они реализованы с помощью спецсимволов юникода, которые просто копируются и вставляются.
При использовании спецсимволов нужно сделать две проверки:
- проверить данный символ на кроссбраузерность - отображается ли он во всех браузерах (бывает, что нет);
- проверить кодировку своего сайта - должна быть 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 пикселей.
Вот и все, такой чудесный скрипт для кнопок прокрутки страницы :) Пробуем, делимся, радуемся.