В стандартном шаблоне Prestashop почему-то нет кнопки вверх (скоролинга), хотя в админке она есть, исправим это недоразумение:
в файл themes/default-bootstrap/footer.tpl перед </body>вставляем:
|
1 |
<a href="" title="Вверх" id="scroller"><i class="icon-angle-up scroller" aria-hidden="true"></i></a> |
в файле header.tpl перед </head> вставляем:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
{literal} <script type="text/javascript"> $(document).ready(function() { $("#scroller").hide().removeAttr("href"); if ($(window).scrollTop() >= "250") $("#scroller").fadeIn("slow") $(window).scroll(function() { if ($(window).scrollTop() <= "250") $("#scroller").fadeOut("slow") else $("#scroller").fadeIn("slow") }); $("#scroller").click(function() { $('body,html').animate({ scrollTop: 0 }, 800); }) }); </script> {/literal} |
Далее в файле стилей themes\default-bootstrap\css\global.css, можно в самое начало, добавим код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
#scroller{ display:none; position:fixed; bottom:0px; right:0px; width: 55px; height:55px; display: block; background-color: #FF9900; border-radius: 50%; color:#FFF; z-index: 99999999999999999999999; text-align:center; } i.scroller{ font-size:36px; margin-top:5px; color:#FFF; z-index: 99999999999999999999999; } |
Обновляем страницу, радуемся результату).
Если кнопка не пишется в дизайн, да и для уникальности полезно, меняйте цвет на свой background-color: #FF9900;
Посмотреть код цвета элемента страницы на любом сайте можно при помощи встроенного в браузер Chrome инспектора ctrl+shift+i > исследовать элемент, или на этом сайте, кликнув по цвет, код будет скопирован в буфер.
Добрый день! Благодарен за информацию по добавлению кнопки вверх на сайт. Всё доходчиво описано, поставил и всё работает, ещё раз спасибо!
Добрый день! В случае если уже не дефолтная тема стоит, добавлять в файлы установленной темы? (если да, то что-то без изменений)
Я проверял работу только для дефолтной темы, но скрипт должен работать и на других, если сайт уже в сети, пришлите ссылку, попробую помочь.
Добрый день! Первый раз комментарий мой не отразился. Добавлял как в дефолтную тему, так и в текущую используемую — без изменений. Я решил вопрос установкой модуля по совету Namp88 http://prestadev.ru/forum/tema-9841.html. В переводах перевел и все. Спасибо что откликнулись! Очень много полезного у вас тут нашел, не бросайте статьи про престу!