Наш опрос
Оцените мой сайт
Всего ответов: 24
Случайный анекдот
16 Самая первая страна, которую посещает Дед Мороз – это Китай. И посещает он эту страну с целью заполнения мешков подарками…
Статистика
Онлайн всего: 1
Гостей: 1
Пользователей: 0

» Сегодня нас посетили:
» Зарег. на сайте
Всего: 3477
Новых за месяц: 2
Новых за неделю: 1
Новых вчера: 0
Новых сегодня: 0
» Из них
Администраторов: 1
Модераторов: 3
С активностью: 176
Авторизованных: 3297

   Кнопка вверх с процентом прокрутки

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

Установка:
Картинки из архива закачайте в папку images файл менеджера.
В самый низ страницы, перед </body> :

Код
<!-- <Кнопка Вверх> -->
<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"><img src="/images/ups.png" onmouseover="this.src='/images/up1.png'" onmouseout="this.src='/images/ups.png'"></a></center>
<center><font color="#000000" size="3">
<span id="pix"></span>%</font></center>
</div>
<!-- </Конец> -->


Скачать архив 15,7 кб Html редактор
Автор: Prosvetekvator
Просмотров: 9381
03.03.2013


Другие статьи почитайка;)
Поделись ссылкой на форумах
Ссылка:
BB-code:
HTML:


« Пред. Кнопка вверх с процентом прокрутки След. »


Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Форма входа

Мини-чат
Топ пользователей
Новое на форуме








Комментарии
11.06.2022