Кнопка «Наверх»

Тема в разделе "Изменение шаблона (кастомизация)", создана пользователем kek5, 05.08.2013.

  1. Offline

    kek5 Недавно здесь

    Регистрация:
    05.08.2013
    Сообщения:
    1
    Симпатии:
    0
    Пол:
    Мужской
    Доброго времени суток!

    У меня возникла проблема: на своем сайте (локальный сервер) я сделал кнопку «Наверх» установив скрипт и картинку в папку с темой "Protostar" (скрипт находится по адресу: templates/protostar/js/buttonTop.js; картинка: templates/protostar/images/button_top_scroll.png). Дело в том, что на главной странице сайта картинка отображается нормально, как и должно быть:
    в остальных разделах сайта (статьи, страницы и т.д.) картинка не отображается, но скрипт работает:
    Почему так происходит?
    В самом файле Javascript'a путь до картинки такой:
    Код (CODE):
    1. <img src="templates/protostar/images/system/button_top_scroll.png" />


    P.S. В Google ничего конкретного не нашел :( Надеюсь на Вашу помощь.
     
    Последнее редактирование модератором: 30.11.2014
  2.  
  3. Offline

    ShinigamiZ Недавно здесь

    Регистрация:
    10.08.2013
    Сообщения:
    1
    Симпатии:
    0
    Пол:
    Мужской
    Так как после установки joomla в шаблоне protostar не появился картинка (а отображалось слово Вверх)?заменил в файле index.php строку:
    Код (PHP):
    1. <p class="pull-right"><a href="#top" id="back-top"><?php echo JText::_('TPL_PROTOSTAR_BACKTOTOP'); ?></a></p>

    На:
    Код (PHP):
    1. <p class="pull-right"><a href="#top" id="back-top"><img src="<?php echo JURI::base(); ?>templates/<?php echo $this->template; ?>/img/up.png"/></a></p>


    Как альтернатива могу предложить кнопки вверх/вниз с плавным появлением при прокрутке контента:
    Кнопки для вставки в код (index.php или др.):
    Код (PHP):
    1. <a style='position: fixed; bottom: 80px; right: 10px; cursor:pointer; display:none;'href='#' id='Go_Top'><img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/img/up.png" alt="Наверх" title="Наверх" /></a>
    2.     <a style='position: fixed; bottom: 40px; right: 10px; cursor:pointer; display:none;'href='#' id='Go_Bottom'><img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/img/down.png" alt="Вниз" title="Вниз"></a>

    Скрипт подгружается из файла кодом, вставляется в нижней части страницы (перед тегом </body>:
    Код (PHP):
    1. <script src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/js/jscroll_btn.js" type="text/javascript"></script>

    Сам скрипт:
    Код (html):
    1. /* ===================================================
    2.  * Scroll buttons
    3.  * ========================================================== */
    4. var go_down = jQuery('body');
    5.     jQuery(function() {
    6.       $("#Go_Top").hide().removeAttr("href");
    7.       if ($(window).scrollTop() >= "250") $("#Go_Top").fadeIn("slow")
    8.       var scrollDiv = $("#Go_Top");
    9.       $(window).scroll(function() {
    10.    if ($(window).scrollTop() <= "250") $(scrollDiv).fadeOut("slow")
    11.        else $(scrollDiv).fadeIn("slow")
    12.       });
    13.       $("#Go_Bottom").hide().removeAttr("href");
    14.       if ($(window).scrollTop() <= go_down.height()-"999") $("#Go_Bottom").fadeIn("slow")
    15.       var scrollDiv_2 = $("#Go_Bottom");
    16.       $(window).scroll(function() {
    17.        if ($(window).scrollTop() >= go_down.height()-"999") $(scrollDiv_2).fadeOut("slow")
    18.        else $(scrollDiv_2).fadeIn("slow")
    19.       });
    20.       $("#Go_Top").click(function() {
    21.        $("html, body").animate({scrollTop: 0}, "slow")
    22.       })
    23.       $("#Go_Bottom").click(function() {
    24.        $("html, body").animate({scrollTop: go_down.height()}, "slow")
    25.       })
    26.     });

    Для работы необходимо подключить последний jQuery.​
     
    Последнее редактирование: 10.08.2013

Поделиться этой страницей

Загрузка...