Форум русской поддержки Joomla!® CMS
06.12.2016, 07:03:38 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

Войти
   
   Начало   Поиск Joomla 3.0 FAQ Joomla 2.5 FAQ Joomla 1.5 FAQ Правила форума Новости Joomla Реклама Войти Регистрация Помощь  
Страниц: [1]   Вниз
  Добавить закладку  |  Печать  
Автор

Переход по меню?

 (Прочитано 441 раз)
0 Пользователей и 1 Гость смотрят эту тему.
warlocksp
Живу я здесь
******

Репутация: +11/-4
Offline Offline

Пол: Мужской
Сообщений: 886


Красота и мудрость - в простоте....


« : 23.08.2015, 09:06:15 »

Доброе утро,

Может вопрос и покажется банальным, но решил спросить как лучше сделать.

На сайте меню (например "Обо мне", "Проекты" и т.д.), а так же на главной странице сайте выведены "Обо мне", "Проекты"
Стоит: Joomla 3.4.3.

Вопрос: как сделать что б при нажатии например на пункт меню "Обо мне" - не переходила куда либо, а спускалась ниже по странице к названию "Обо мне" где это отображается?
Записан
kik84
Живу я здесь
******

Репутация: +59/-4
Offline Offline

Сообщений: 1307



« Ответ #1 : 23.08.2015, 09:40:09 »

1 http://joxi.ru/v29NBaxhye5aAG http://joxi.ru/YmENBJWhypR826
2 На странице блок с id="about"
3 Можно такой скрипт
Код:
(function ($) {
  $.fn.anchorAnimate = function(options) {
    var settings = $.extend({}, $.fn.anchorAnimate.defaults, options);

    return this.each(function() {
      var caller = this;
      $(caller).click(function(event) {
        event.preventDefault();
        var elementClick = $(caller).attr("href");

        var destination = $(elementClick).offset().top + settings.offset;
        $("html:not(:animated), body:not(:animated)").animate({ scrollTop: destination}, settings.speed, function() {
          if(0 === settings.offset) {
            window.location.hash = elementClick;
          }
        });
        return false;
      });
    });
  };

  $.fn.anchorAnimate.defaults = {
    speed: 700,
    offset: -50
  };
}(jQuery));
Записан
vipiusss
Профи
********

Репутация: +260/-8
Offline Offline

Пол: Мужской
Сообщений: 4571


Skype: renor_


« Ответ #2 : 23.08.2015, 10:13:37 »

Якорем к позиции модуля.И скрипты не нужны.2 строчки кода.
Записан
kik84
Живу я здесь
******

Репутация: +59/-4
Offline Offline

Сообщений: 1307



« Ответ #3 : 23.08.2015, 10:30:50 »

Якорем к позиции модуля.И скрипты не нужны.2 строчки кода.
А плавность перехода?
Записан
vipiusss
Профи
********

Репутация: +260/-8
Offline Offline

Пол: Мужской
Сообщений: 4571


Skype: renor_


« Ответ #4 : 23.08.2015, 10:33:23 »

А плавность перехода?
Про плавность ТС не писал.Тогда со скриптом (или css)
Записан
warlocksp
Живу я здесь
******

Репутация: +11/-4
Offline Offline

Пол: Мужской
Сообщений: 886


Красота и мудрость - в простоте....


« Ответ #5 : 23.08.2015, 12:05:57 »

А нет, ничего стандартного (универсального) для Joomla - типа плагина, модуля, что б не лезть в скрипты?
Записан
robert
Профи
********

Репутация: +343/-11
Offline Offline

Пол: Мужской
Сообщений: 3582


« Ответ #6 : 23.08.2015, 12:09:04 »

Что-то вы перемудрили с кодом.
Код
(function($){
$('a').on('click',function(e){
e.preventDefault();
$('body').animate({scrollTop:$(this.hash).offset().top},1000);
});
})(jQuery);
 
Записан
warlocksp
Живу я здесь
******

Репутация: +11/-4
Offline Offline

Пол: Мужской
Сообщений: 886


Красота и мудрость - в простоте....


« Ответ #7 : 23.08.2015, 12:11:13 »

Что-то вы перемудрили с кодом.
Код
(function($){
$('a').on('click',function(e){
e.preventDefault();
$('body').animate({scrollTop:$(this.hash).offset().top},1000);
});
})(jQuery);
 
С чем его кушать (куда вставлять)?
Записан
beliyadm
Профи
********

Репутация: +1566/-61
Offline Offline

Пол: Мужской
Сообщений: 8110


Севастополь == Россия


« Ответ #8 : 23.08.2015, 12:59:19 »

Есть такой вот плагин https://github.com/kswedberg/jquery-smooth-scroll
в админке для пункта меню (или в материале) задаем нужный класс и в скрипте на уровне шаблона активируем переход, будет и скролл и прокрутка и анимация
Записан
robert
Профи
********

Репутация: +343/-11
Offline Offline

Пол: Мужской
Сообщений: 3582


« Ответ #9 : 23.08.2015, 13:47:45 »

С чем его кушать (куда вставлять)?
Куда хотите, лишь бы он загрузился. Можно в шаблон модуля меню или в шаблон сайта. Только нужно подправить чуть-чуть, чтобы не срабатывало на всех ссылках.
Записан
warlocksp
Живу я здесь
******

Репутация: +11/-4
Offline Offline

Пол: Мужской
Сообщений: 886


Красота и мудрость - в простоте....


« Ответ #10 : 23.08.2015, 23:41:25 »

Куда хотите, лишь бы он загрузился. Можно в шаблон модуля меню или в шаблон сайта. Только нужно подправить чуть-чуть, чтобы не срабатывало на всех ссылках.
Опробую два варианта ваш и что предложил: beliyadm
Спасибо понял...
Записан
warlocksp
Живу я здесь
******

Репутация: +11/-4
Offline Offline

Пол: Мужской
Сообщений: 886


Красота и мудрость - в простоте....


« Ответ #11 : 23.08.2015, 23:42:24 »

Есть такой вот плагин https://github.com/kswedberg/jquery-smooth-scroll
в админке для пункта меню (или в материале) задаем нужный класс и в скрипте на уровне шаблона активируем переход, будет и скролл и прокрутка и анимация
Спасибо опробуем...
Записан
warlocksp
Живу я здесь
******

Репутация: +11/-4
Offline Offline

Пол: Мужской
Сообщений: 886


Красота и мудрость - в простоте....


« Ответ #12 : 24.08.2015, 07:38:35 »

Дааа, извините но наверное я не ас в JC:
Подскажите пожалуйста, что куда вставить и где что прописать... По пунктам, пожалуйста...

В коде выдает ошибку в первой строчке.
Код:
(function($){
$('a').on('click',function(e){
e.preventDefault();
$('body').animate({scrollTop:$(this.hash).offset().top},1000);
});
})(jQuery);

В коде https://github.com/kswedberg/jquery-smooth-scroll
Куда его вставить и где, какие классы должен прописать...

Подскажите пожалуйста, что куда вставить и где что прописать... По пунктам, пожалуйста...
« Последнее редактирование: 25.08.2015, 07:52:15 от warlocksp » Записан
beliyadm
Профи
********

Репутация: +1566/-61
Offline Offline

Пол: Мужской
Сообщений: 8110


Севастополь == Россия


« Ответ #13 : 24.08.2015, 21:36:47 »

Подскажите пожалуйста, что куда вставить и где что прописать... По пунктам, пожалуйста...
в индекс шаблона вставляете загрузку jquery.smooth-scroll.min.js
Дальше пишите js код в том же индексе шаблона (при условии подключенного Jquery)
Код
$('#tpl_top a').smoothScroll();
У каждой ссылки есть атрибут href="#tpl_section3" где tpl_section3 это ID нужного элемента страницы, до которого будет идти скролл
Записан
warlocksp
Живу я здесь
******

Репутация: +11/-4
Offline Offline

Пол: Мужской
Сообщений: 886


Красота и мудрость - в простоте....


« Ответ #14 : 25.08.2015, 07:52:58 »

в индекс шаблона вставляете загрузку jquery.smooth-scroll.min.js
Дальше пишите js код в том же индексе шаблона (при условии подключенного Jquery)
Код
$('#tpl_top a').smoothScroll();
У каждой ссылки есть атрибут href="#tpl_section3" где tpl_section3 это ID нужного элемента страницы, до которого будет идти скролл

Огромное спасибо, теперь разобрался...
Записан
Страниц: [1]   Вверх
  Добавить закладку  |  Печать  
 
Перейти в:  

Powered by SMF 1.1.21 | SMF © 2006, Simple Machines

Joomlaforum.ru is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by Open Source Matters
the trademark holder in the United States and other countries.

LiveInternet