Хаки и Скрипты Next Generation CMS

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

irbees2008 irbees2008 Опубликовано - 21 - октября Кнопки и иконки
3569 - 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.Вот и все пользуемся.

Можешь почитать и вот эту статейку "Подключение визуального редактора CKeditor на NGcms"

Опрос

Ваше мнение

какой форум лучше для вас
Результаты

Последние комментарии

Теги

Anything in here will be replaced on browsers that support the canvas element

Статистика

  • Caйту: 4395 дней
  • Новостей: 566
  • Комменты: 257
  • Зарегистрированно : 662
  • Онлайн всего: [6]
  • Гости: [6]
  • Были сегодня : [1] Яндекс
  • SQL запросов: 33
  • Генерация страницы: 1.48сек
  • Потребление памяти: 5.164 Mb 
  •   Яндекс.Метрика