КНОПКИ И ПЛАВНАЯ ПРОКРУТКА ВВЕРХ И ВНИЗ СТРАНИЦЫ.
HTML код кнопок выглядит так:
Для реализации указателей направления прокрутки - стрелок, применяются спецсимволы юникода, которые просто копируются и вставляются внутри тега. Такой подход позволяет обойтись без использования изображений, добавляя плюс к оптимизации, а также позволяя легко настроить и, по необходимости, быстро изменить внешний вид кнопок.
При использовании стандартных спецсимволов в дизайне элементов сайта нужно сделать две проверки:
1) проверить кодировку веб-страницы - должна быть UTF-8;
2) проверить данный символ на кроссбраузерность - отображается ли он во всех браузерах, бывает, что нет;
HTML-код размещаем где удобно в шаблоне, внешний вид и расположение кнопок задается в CSS
Благодаря фиксированному позиционированию кнопки будут находится, так сказать, всегда под рукой, и теперь остается только добавить скрипт jQuery, который по клику будет плавно прокручивать страницу в вверх или вниз:
Значение 250 в скрипте, показывает:
- в первой строке - кнопка появится когда страница будет прокручена больше чем на 250 пикселей;
- во второй, что исчезнет когда до верха страницы останется меньше чем 250 пикселей.
1017
0
<div class="go-up" title="Вверх" id='ToTop'>⇧</div>
<div class="go-down" title="Вниз" id='OnBottom'>⇩</div>Для реализации указателей направления прокрутки - стрелок, применяются спецсимволы юникода, которые просто копируются и вставляются внутри тега. Такой подход позволяет обойтись без использования изображений, добавляя плюс к оптимизации, а также позволяя легко настроить и, по необходимости, быстро изменить внешний вид кнопок.
При использовании стандартных спецсимволов в дизайне элементов сайта нужно сделать две проверки:
1) проверить кодировку веб-страницы - должна быть UTF-8;
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>2) проверить данный символ на кроссбраузерность - отображается ли он во всех браузерах, бывает, что нет;
HTML-код размещаем где удобно в шаблоне, внешний вид и расположение кнопок задается в CSS
.go-up, .go-down {
display: none;
position: fixed; /*позиционирование*/
z-index: 9999; /*поверх все элементов на странице*/
right: 15%; /*положение на странице, если слева - left*/
background: #4F4F4F;
border: 1px solid #ccc;
border-radius: 5px;
cursor: pointer;
color: #fff;
text-align: center;
font: normal normal 42px/42px sans-serif;
text-shadow: 0 1px 2px #000;
opacity: .5;
padding: 0px;
font-size: 33px;
line-height: 38px;
margin-bottom: 5px;
width: 42px;
height: 42px;
}
.go-up { bottom: 60px; }
.go-down { bottom: 10px; }
.go-down:hover,
.go-up:hover {
opacity: 1;
box-shadow: 0 5px 0.5em -1px #666;
}Благодаря фиксированному позиционированию кнопки будут находится, так сказать, всегда под рукой, и теперь остается только добавить скрипт jQuery, который по клику будет плавно прокручивать страницу в вверх или вниз:
$(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")})
});Значение 250 в скрипте, показывает:
- в первой строке - кнопка появится когда страница будет прокручена больше чем на 250 пикселей;
- во второй, что исчезнет когда до верха страницы останется меньше чем 250 пикселей.
Comments