14 мая 2018: Китайский авианосец "Пипи Ся" начал первый боевой поход
Первый авианосец китайского производства покинул порт базирования. Он отправился в тестовое плавание в 07:00 по местному времени (02:00 мск).  

11 мая 2018: ZTE прекращает деятельность из-за санкций США
Компания объявила недавно, что она прекратила «все операционные действия», включая производство, после того как администрация Дональда Трампа...

4 мая 2018: Россия разгромила Францию на старте чемпионата мира 4 мая 2018
4 мая в Дании стартовал чемпионат мира-2018 по хоккею с шайбой. И уже в первый игровой день на лед вышла сборная России, которой предстояло встретиться с национальной...

4 апреля 2018: Одному браслету удалось обойти Xiaomi Mi Band 2 по популярности
 Самыми первыми спортивными браслетами на потребительском рынке стали таковые от компаний Jawbone, Fitbit и Nike. Тем не менее, их продукция всегда стоила...

4 апреля 2018: Apple разрабатывает вогнутый внутрь экран
Apple работает над новыми технологиями для создания следующей версии iPhone, сообщает Bloomberg со ссылкой на источники. В новом смартфоне могут быть реализованы...

4 апреля 2018: Мультфильм "Возвращение в Простоквашино" набрал более 7 миллионов...
"Союзмультфильм" опубликовал первую серию мультипликационного сериала "Простоквашино". С момента публикации не прошло и суток, а ролик уже...

3 апреля 2018: Раскрыты характеристики нового Android-смартфона от Xiaomi
В Сети появились подробные данные о смартфоне Xiaomi Mi A2, выход которого ожидается нынешним летом. Это преемник модели Mi A1. Гаджет, презентованный в прошлом году,...

3 апреля 2018: Навигатор на лобовом стекле: принцип работы и возможные опции
Автомобильный навигатор с  традиционным дисплеем – это  устройство, которое давно используется автолюбителями. Использование навигатора значительно...

2 апреля 2018: Цукерберг назвал поверхностной критику Тима Кука в адрес Facebook
Ранее глава Apple заявил, что компании не грозит скандал из-за утечки данных, потому что она не собирает личные данные пользователей для использования в коммерческих...

2 апреля 2018: Сбербанк впервые выпустил кредитку для путешественников
Но самые лучшие условия по ней продлятся всего 4 месяца Сбербанк предложил кредитную карту Visa Classic с повышенными бонусами для путешественников....

ТОП новостей партнёров

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

Автор: Bohren
Опубликовано: 1460 дней назад (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".

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

Сообщества

 

 
Все билеты ТУТ
OneTwoTrip

 

tutu.ru

 

Привет, я - новая автоматизация от UniSender ;)|

OneTwoTrip