Кнопка наверх

РАСШИРЕНИЯ JOOMLA

Кнопка наверх

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

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

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

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

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

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

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

$(function() {

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

});

</script>

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

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

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

top1

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

В данном случае он подключает 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

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

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

Самые популярные статьи:

Руслан, а ты не пробовал установить модуль
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

Блин как не пытаюсь,что-то не выходит правильно, у меня есть похожий код в индексе

Пробовал заменить вашим,не выходит,пробую просто вставить ссылку на картинку,получа ется но остается старая надпись "наверх",не подскажите что куда именно вписать