Вход

naverhКонечно, существуют расширения Joomla для создания подобных кнопок, но можно создать ее самому, без установки дополнительных расширений. Итак, создаем кнопку наверх.

ШАГ 1. Подготовка дизайна собственной кнопки наверх в Joomla!2.5

Создаем свою кнопку наверх под свой дизайн сайта (у меня она 50х50px, png) и сохраняем в папке "image" своего сайта.

 

ШАГ 2.Открыть в Notepad++ файл index.php, который находится \ваш сайт\templates\ваш шаблон\index.php 

Если вы не уверены в своих силах, сделайте на всякий случай копию этого файла перед изменением!

Между тегами <body></body> (я обычно вставляю прямо перед тегом </body>) 

ставим следующий код:

<a href="#" id="toTop"><img src='http:/ваш сайт/images/naverh.png' border="0" align="absmiddle" /></a>

<script src="http:/ваш сайт/js/toTop.js" type="text/javascript"></script>

<script type="text/javascript">

$(function() {

$("#toTop").scrollToTop();

});

</script> 

naverh.png - название кнопки.

Если сайт на хостинге, то src="http://сайт.ru/images/naverh.png"

src="http://сайт.ru/js/toTop.js". После переноса на хостинг, не забудьте поменять этот путь.

top1

ШАГ 3. Здесь же, в index.php находите секцию HEAD и добавляете в самый ее конец, перед закрывающим тегом </HEAD> следующий код:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>

В данном случае он подключает jquery с google.

top2

ШАГ 4. Создаем скрипт кнопки наверх, который будет прятать ее, когда вы находитесь вверху страницы и показывать, когда вы начинаете опускаться вниз. Также этот скрипт наверх, задает скорость прокрутки страницы. Для этого, надо создать папку в корне сайта с названием «js» и в этой папке создать в обычном блокноте js-файл с именем toTop.js

и вот с таким содержанием:

$(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr("href"); if($(window).scrollTop()!="0"){$(this).fadeIn("slow")}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()=="0")

{$(scrollDiv).fadeOut("slow")}else{$(scrollDiv).fadeIn("slow")}})

;$(this).click(function()

{$("html, body").animate({scrollTop:0},"slow")})}});

top3

ШАГ 5. Задать стили для кнопки Наверх. Открыть папку \ваш сайт\templates\ваш шаблон\css\ template.css и скопировать следующий текст:

#toTop {
            position: fixed;
            bottom: 20px;
            right: 100px;
            background: none;

            cursor: pointer;
                 }

 Я обычно прописываю их в самом конце:

top4

Эти данные можно менять, тем самым меняя оформление кнопки наверх.

Вот и все, ваша кнопка готова.

Комментарии  

 
0 # Руслан 21.01.2015 18:48
Привет, а подскажи пожалуйста всё сделал по инструкции но кнопка не исчезает когда прокрутить вверх))
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Админ 21.01.2015 18:55
Руслан, а ты не пробовал установить модуль
http://rjoomla.ru/moduli/scroll-to-top-knopka-naverkh-dlya-joomla.html
Намного быстрее и проще.
Когда я делала кнопку, как описано здесь, просто не было этого модуля.
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Руслан 21.01.2015 19:02
А всё разобрался спс вашему сайту часто к вам захожу
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Руслан 21.01.2015 19:05
установил модуль , но стрелка отображается только на гл странице и не знаю почему...
Хочется ручками, а если вопросы не по теме где можно писать где-то лично?? или чат
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Админ 21.01.2015 19:11
Может быть, в настройках модуля у вас отмечена только главная страница, где "Привязка модуля"
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Alex 22.01.2015 21:47
Блин как не пытаюсь,что-то не выходит правильно, у меня есть похожий код в индексе



Пробовал заменить вашим,не выходит,пробую просто вставить ссылку на картинку,получа ется но остается старая надпись "наверх",не подскажите что куда именно вписать
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Alex 22.01.2015 22:37
Получилось,не понимаю че за фигня,через фтп редактировал нотепадом не получалось,сдел ал прям на сервере родным менеджером и все работает
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Админ 22.01.2015 22:40
Я рада, что у вас получилось. Больше, чем написано в статье - что и куда, я сказать не могла :-)
Ответить | Ответить с цитатой | Цитировать
 

Добавить комментарий


Защитный код
Обновить