3768
- 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;
}
Код:
// объявим переменные
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>
Код:
<div class="in_top">
<span>↑ Наверх ↑</span>
</div>
Можешь почитать и вот эту статейку "Делаем окошко , всплывающее через заданное время"
Это тоже интересно
- 06.02.13JS - Внешние объекты
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.