Делаем ушку body_end. Ушка уже предопределена в main.php шаблона, поэтому её нигде прописывать не нужно. Как вариант, можно использовать ушки footer-start или footer-end, но это не принципиально.
Тип ушки задаём как PHP и пишем в ней:
<div id="to_top" style="position: fixed; right: 0; bottom: 0; width: 30px; height: 30px; color: red; cursor: pointer;" title="Вверх!">⬆</div> <?= mso_load_jquery('jquery.scrollto.js');?> <script> $('#to_top').click(function(){$.scrollTo("body", 300)}) </script>
Элементу div#to_top указываем фиксированное положение, размеры, цвет и текстовую иконку-стрелку. После подключаем jQuery-плагин scrollto - он в уже комплекте MaxSite CMS, предназначен для красивого скролирования к любому HTML-тэгу. Дальше указываем, что скролировать нужно к BODY и время скролинга (300мс).
Пользуемся!
UPD. Вот ещё один вариант от Дениса. Код ушки body_end.
<div id="to_top" style="position: fixed; right: 0; bottom: 0; width: 30px; height: 30px; color: red; cursor: pointer;" title="Вверх!">⬆</div> <script> $("#to_top").hide(); // fade in #to_top $(function () { $(window).scroll(function () { if ($(this).scrollTop() > 300) { $("#to_top").fadeIn(); } else { $("#to_top").fadeOut(); } }); // scroll body to 0px on click $("#to_top").click(function () { $("body,html").animate( {scrollTop: 0}, 800); return false; }); }); </script>
Комментариев: 5 RSS
1Sasha Vasko25-05-2012 14:06
Скрол в Хроме не срабатывает наверное есть проблема с jquery...
2Денис25-05-2012 19:01
у меня так. без доп файлов. в хроме работает
3Аноним25-05-2012 19:13
Спасибо, вариант даже интересней! Добавил в запись ваш вариант.
4Аноним02-06-2012 13:11
Еще бы кнопки сами нарисовать через css со стрелками..
5Аноним26-06-2012 18:37
да, второй вариант действительно понравился больше. Спасибо!