среда, 3 июля 2013 г.

Создаем кнопку "Наверх!" с плавным скроллингом.

Немного погуглил, немного покопался в SiteEdit и научился прикручивать к сайту такую полезную фишку, как кнопка "Наверх" или как угодно еще ее называть. Это кнопка, возникающая внизу окна сайта при его прокрутке вниз и по нажатию возвращающая пользователя наверх длинной страницы, причем не скачком, а плавной прокруткой страницы. Пример можно увидеть здесь. Иногда бывает очень удобно.

Итак, небольшая инструкция, как это реализовать на SiteEdit.
  1. Загрузите на свой сайт в папку files вот эту картинку со стрелкой (можно взять ту, что видите)  а также вот этот файл. Это надо делать только(!) через меню "Прикрепить файл к проекту".
  2. В CSS стили вставьте:

    #toTop {cursor:pointer; border:1px solid #ffffff; width:50px; height:50px; position:fixed; bottom:10px; right:10px; padding:5px; text-align:center;} (Вы можете заменить картинку на свою, но надо будет добавить в стили соответствующие изменения)
  3. Создайте глобальную (или локальную, если кнопка должна быть только на определенной странице) переменную с произвольным именем и в эту переменную вставьте следующий код:
    <noindex><a href="#" id="toTop"><img src="http://ваш_сайт.ru/files/up10.png" border="0" align="absmiddle" /></a> <script src="http://ваш_сайт.ru/files/naverh.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $("#toTop").scrollToTop(); }); </script></noindex>
    Не забудьте заменить http://ваш_сайт.ru/ на адрес именно вашего сайта (!!!)
  4. Добавьте переменную в карту дизайна, можно после всего кода.
  5. Наслаждайтесь!
А кто не хочет разбираться во всех этих премудростях ("многа букаф, неасилил"), могу предложить готовый модуль, работающий на любой версии SiteEdit. Недогого возьму :-)

4 комментария:

  1. Спасибо! Полезная штука, пригодится.

    ОтветитьУдалить
  2. Спасибо Антон, уже воспользовался твоим советом.

    ОтветитьУдалить
  3. спасибо. Отлично работает, и симпатично выглядит

    ОтветитьУдалить
  4. Отлично! Получилось) Спасибо Антон!

    ОтветитьУдалить