В стандартном шаблоне Prestashop почему-то нет кнопки вверх (скоролинга), хотя в админке она есть, исправим это недоразумение: в файл themes/default-bootstrap/footer.tpl перед </body>вставляем:
|
<a href="" title="Вверх" id="scroller"><i class="icon-angle-up scroller" aria-hidden="true"></i></a> |
в файле header.tpl перед </head> вставляем:
|
{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; } |
Обновляем страницу, радуемся результату). Если кнопка не пишется в дизайн, да и для уникальности …
Читать далее