• 1388
  • 0
  • Адаптировал: irbees2008
  • Источник:
  • Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки

Сегодня будем ставить Кнопку "ВВерх" и "ВНИЗ" ,т.е. кнопка работает в двух направлениях.

И так приступим
1.В нашем шаблоне откриваем файл стилей и добавляем вот эти стили для нашей кнопки,в дальнейшем вы можете их отредактировать под свой сайт

Код:
.in_top{
position: fixed;
left: 0px;
top: 0px;
width: 100px;
height: 100%;
opacity: 0.5;
filter: alpha(opacity=50);
cursor: pointer;
display: none;
}
.in_top:hover{
background-color: #E1E7ED;
opacity: 1;
filter: alpha(opacity=100);
}
.in_top span{
display: block;
width: 100px;
margin-top: 10px;
text-align: center;
color: #45688E;
font-weight: bold;
}
2.Сам скрипт нашей кнопки,можете добавить в любой файл js вашего шаблона ,
Код:
// объявим переменные
var bottom_position = 0; // положение страницы
var flag_bottom = false; // флаг, для отображения кнопки "назад"
var flag_animate = false;// Флаг, определяющий, выполнение анимации

$(document).ready(function(){
// клик по кнопке вверх/назад
$('.in_top').click(function(){
// поднимаем флаг, началась выполнениние анимации
flag_animate = true;
// если на данный момент кнопка "назад"
if(flag_bottom){
// то скролим страницу в нужное место
$("body,html").animate({"scrollTop":bottom_position}, 300, function(){
// опускаем влаг анимации, она закончилась
flag_animate = false;
});
// меняем кнопку
flag_bottom = false;
$('.in_top span').html('↑ Наверх ↑');
}else{
// если кнопка "вверх"
$("body,html").animate({"scrollTop":0}, 300, function(){
flag_animate = false;
});
// запомним на сколько была прокручена страница
bottom_position = $(window).scrollTop();
// и зададим флаг, что нужно показать кнопку "назад"
flag_bottom = true;
$('.in_top span').html('↓ Назад ↓ ');
}
});

// делаем проверку при скролле
$(window).scroll(function(event){
var countScroll = $(window).scrollTop();
// если прокрутили больше 100 пикселей и анимация не выполняется, то показываем кнопку
if (countScroll > 100 && !flag_animate){
$('.in_top').show();
if(flag_bottom){
flag_bottom = false;
$('.in_top span').html('↑ Наверх ↑');
}
// иначе прячем кнопку, если это не кнопка "назад"
}else{
if(!flag_bottom){
$('.in_top').hide();
}
}
});
});
или просто заключить в тег
Код:
<script>......</script>
3.Ну и сама кнопка,добавляем перед закрытием тега body
Код:
<div class="in_top">
<span>↑ Наверх ↑</span>
</div>
4.Вот и все пользуемся.

Можешь почитать и вот эту статейку "Выводим интересный вариант меню для вашего сайта"

mistakes

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Ваше мнение

На каком движке ваш сайт?
Результаты

----