31 декабря 2016: Всех с Новым годом!

21 ноября 2016: Из малолитражки во внедорожник. Эволюция Ford Ka.
Автопроизводители изгаляются как могут. Сегодня они превратили утилитарный кроссовер Hyundai Creta в пикап для «мажоров», а завтра, кто знает, захотят...

19 мая 2016: В городе Уварово вновь зазвучит Кадетская симфония
6-ой Всероссийский/2-ой Международный фестиваль «Кадетская симфония» стартует уже 26 мая. Грандиозное мероприятие вновь соберёт на уваровской земле...

18 февраля 2016: Шахматный турнир в Уварово
  11 февраля в городе состоялись зональные соревнования по шахматам в зачёт спартакиады. В турнире приняли участие  учащиеся общеобразовательных учебных...

18 февраля 2016: Проверка готовности муниципальных образований
Подготовка к паводку началась. По  распоряжению председателя комиссии по предупреждению и ликвидации чрезвычайных ситуаций  в Тамбовской области проводится...

18 февраля 2016: Федеральный уровень фестиваля "Кадетская симфония"
  «Кадетская симфония» включена в государственную  программу патриотического воспитания на ближайшие 5 лет. 1,5 миллиона рублей ежегодно, вплоть до...

18 февраля 2016: Уваровский МФЦ
Уваровскому МФЦ исполнилось 4 года. Открытие Многофункционального центра предоставления государственных и муниципальных услуг состоялось в феврале 2012 года....

18 февраля 2016: Рождественская витрина
Подведены итоги  смотра-конкурса «Рождественская витрина».  Торжественная церемония награждения победителей и участников дипломами и памятными...

18 февраля 2016: Мой двор, мой дом - мой любимый город
  Ежегодно самых активных и инициативных горожан, внесших существенный вклад в благоустройство Уварово, чествуют в рамках проводимого конкурса «Мой двор, мой...

18 февраля 2016: Применение новых технологий при утилизации бытовых отходов в городе Уварово
На смену старым свалкам приходят современные полигоны.  В тамбовской области продолжается реализация Генеральной схемы санитарной очистки. Очередным шагом на...

Кнопка "вверх" для instant cms

Автор: Bohren
Опубликовано: 1222 дня назад (21 мая 2014)
Редактировалось: 4 раза — последний 15 июня 2014
+2
Голосов: 2
Многие разработчики умничают, что не стоит заострять внимание на подобных мелочах. Но, что есть мелочи, весь рабочий код код состоит из набора мелочей, слаженно функционирующих между собой.
И так рецепт кнопки.
Нам потребуется:
notepad++, filezilla и мышка, чтоб скопировать отсюда код и вставить его себе.

Открываем блокнот, создаем новый документ, прописываем в нём следующее:
Код PHP:
  1. $(function () {
  2. $(window).scroll(function () {
  3. if ($(this).scrollTop() > 100) $('a#move_up').fadeIn();
  4. else $('a#move_up').fadeOut(400);
  5. });
  6. $('a#move_up').click(function () {
  7. $('body,html').animate({
  8. scrollTop: 0
  9. }, 800);
  10. return false;
  11. });
  12. });
  13.  
Далее сохраняем этот документ по названием move_up.js - это скрипт, о чём собственно свидетельствует расширение файла.
Запускаем filezilla, идем по ftp в папку /templates/ВАШ ШАБЛОН/js, т.е в папку скриптов действующего шаблона. Переносим в него созданный документ.

Далее, той же filezilla забираем с сервера из папки стилей /templates/ВАШ ШАБЛОН/css файл styles.css.

Открываем его тем же блокнотом. Листаем вниз, в конец кода и прописываем следующее:

Код PHP:
  1. a#move_up {
  2. position: fixed;
  3. bottom: 15px;
  4. right: 15px;
  5. display: none;
  6. width: 90px;
  7. height: 21px;
  8. text-align: center;
  9. font: 12px Tahoma;
  10. text-decoration: none;
  11. color: #ffffff;
  12. background: #83ca70;
  13. padding-top:5px;
  14. opacity:0.9;
  15. filter: alpha(opacity=90);
  16. }
  17. a#move_up:hover {
  18. color: #ffffff;
  19. background: #529fcb;
Сохраняем и возвращаем обратно с "переписать с заменой".

Теперь самое интересное. Есть несколько способов заставить работать этот скрипт.
Способ №1

Открываем статью с большим количеством комментариев и через функцию "источник" добавляем следующую строку:
Код PHP:
  1. <a id="move_up" href="#">Наверх</a>
НО, в этом случае скрипт будет срабатывать только на данной странице. Соответственно кнопка будет видна только там, где прописана эта строчка.

Способ №2

Поскольку сайты на instant cms имеют удобный модульный вид. Открываем "сквозной" модуль, который присутствует на всех страницах сайта. В нашем случае, это нижний модуль с банером. Прописываем в него ту же строчку:
Код PHP:
  1. <a id="move_up" href="#">Наверх</a>
и... вуаля, кнопка на всех страницах сайта без исключения.

Пользуйтесь!
Комментарии (5)
Александр # 21 мая 2014 в 21:04 +2
вот так почитаешь и подумаешь.. вууумный smile
Bohren # 21 мая 2014 в 21:15 +2
но у меня нет твоего опыта...по годам hoho
Антон # 21 мая 2014 в 21:37 +1
На укоз тоже можно внедрить?
Александр # 21 мая 2014 в 21:44 +1
а как ты там в код залезешь?
Bohren # 21 мая 2014 в 22:52 0
да можно
так же фазилой по фтп
только там проще якорями назначать для каждой страницы, скрипт уже не требуется.
Код PHP:
  1. ...href="#">Наверх</a>
pref="#Начало" - это и есть якорь и его название.

Аналогом всей статьи служит всего лишь одна кнопка на клавиатуре каждого юзера "Home".

Работу якорей можно посмотреть ТУТ. Там все гороскопы на якорях.