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

[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]

Страница 1 из 1
1

Форум » Создание сайта » HTML коды для uCoz » Кнопка "Вверх" для сайта, блога или форума (Кнопка "Вверх" для сайта, блога или форума)

admin

Дата: Понедельник, 23.12.2013, 12:03 | Сообщение # 1

Главный админ

Группа: Администраторы

Сообщений: 336

Награды: 0

Репутация: 1

Статус: Offline

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

[ Скачать с сервера (0.7Kb) ]

Что в этом скрипте особенного:
1) Появляется скроллирующая кнопка только после тот, как вы начнёте пролистывать страницу Вниз и пропадёт, как только вы снова окажетесь в самом верху страницы
2) При нажатии на кнопку происходит плавное прокручивание страницы вверх (В Opera резкий переход вверх без всякой плавности)

Сегодня мы расскажем как вставить скрипт кнопка "Вверх” на сайт uCoz или блок. Эта кнопка будет очень полезна для ваших сайтов, блогов или форумов с длинными страницами. Данный скрипт не нагружает сайт или блог и достаточно эффективен.

Установка:
1.Заходим в панель управления сайтом.

2.Дизайн:Управления дизайном (шаблоны)

3.Нижняя часть сайта.

4.Вставляем код скрипта,сохраняем и переходим на сайт. (Скрипт готов)

Код

<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><img src="http://bambun.ru/images/ups.png" onmouseover="this.src='http://bambun.ru/images/up1.png'" onmouseout="this.src='http://bambun.ru/images/ups.png'"></a></center>
   <center><font color="#000000" size="3">
   <span id="pix"></span>%</font></center>
   </div>

Если вам понравится дополнительная помощь обращайтесь в комментариях.И не забываем делиться с друзьями.

data-yashareType="button" data-yashareQuickServices="yaru,vkontakte,facebook,twitter,odnoklassniki,moimir,lj,gplus">

Нравится

Страница 1 из 1
1