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

  • 14 Ответов
  • 599 Просмотров

0 Пользователей и 1 Гость просматривают эту тему.

*

warlocksp

  • ******
  • 926
  • 8
  • Красота и мудрость - в простоте....
Переход по меню?
« : 23.08.2015, 10:06:15 »
Доброе утро,

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

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

Вопрос: как сделать что б при нажатии например на пункт меню "Обо мне" - не переходила куда либо, а спускалась ниже по странице к названию "Обо мне" где это отображается?
Разработка, сопровождения, продвижение веб ресурсов...Хостинг-провайдер...
ICQ : 663021519;Skype: Warl-Uanic;Nic-Handle: Warl-Uanic.

*

kik84

  • ******
  • 1266
  • 59
Re: Переход по меню?
« Ответ #1 : 23.08.2015, 10: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

  • ********
  • 5496
  • 318
  • JoomlaNet
Re: Переход по меню?
« Ответ #2 : 23.08.2015, 11:13:37 »
Якорем к позиции модуля.И скрипты не нужны.2 строчки кода.
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями

*

kik84

  • ******
  • 1266
  • 59
Re: Переход по меню?
« Ответ #3 : 23.08.2015, 11:30:50 »
Якорем к позиции модуля.И скрипты не нужны.2 строчки кода.
А плавность перехода?

*

vipiusss

  • ********
  • 5496
  • 318
  • JoomlaNet
Re: Переход по меню?
« Ответ #4 : 23.08.2015, 11:33:23 »
А плавность перехода?
Про плавность ТС не писал.Тогда со скриптом (или css)
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями

*

warlocksp

  • ******
  • 926
  • 8
  • Красота и мудрость - в простоте....
Re: Переход по меню?
« Ответ #5 : 23.08.2015, 13:05:57 »
А нет, ничего стандартного (универсального) для Joomla - типа плагина, модуля, что б не лезть в скрипты?
Разработка, сопровождения, продвижение веб ресурсов...Хостинг-провайдер...
ICQ : 663021519;Skype: Warl-Uanic;Nic-Handle: Warl-Uanic.

*

robert

  • ********
  • 4002
  • 371
Re: Переход по меню?
« Ответ #6 : 23.08.2015, 13:09:04 »
Что-то вы перемудрили с кодом.
Код: javascript
(function($){
$('a').on('click',function(e){
e.preventDefault();
$('body').animate({scrollTop:$(this.hash).offset().top},1000);
});
})(jQuery);
  • Не будь паразитом, сделай что-нибудь самостоятельно!
  • В личке и по Skype не даю советов.

*

warlocksp

  • ******
  • 926
  • 8
  • Красота и мудрость - в простоте....
Re: Переход по меню?
« Ответ #7 : 23.08.2015, 13:11:13 »
Что-то вы перемудрили с кодом.
Код: javascript
(function($){
$('a').on('click',function(e){
e.preventDefault();
$('body').animate({scrollTop:$(this.hash).offset().top},1000);
});
})(jQuery);
С чем его кушать (куда вставлять)?
Разработка, сопровождения, продвижение веб ресурсов...Хостинг-провайдер...
ICQ : 663021519;Skype: Warl-Uanic;Nic-Handle: Warl-Uanic.

*

beliyadm

  • ********
  • 8359
  • 1527
  • Севастополь == Россия
Re: Переход по меню?
« Ответ #8 : 23.08.2015, 13:59:19 »
Есть такой вот плагин https://github.com/kswedberg/jquery-smooth-scroll
в админке для пункта меню (или в материале) задаем нужный класс и в скрипте на уровне шаблона активируем переход, будет и скролл и прокрутка и анимация
Все истины, которые я хочу вам изложить, — бесстыдная ложь.
Записки нетрезвого кодера || -=Joomla FAQ=- || -=все плохо=- || skype: beliyadm_pb

*

robert

  • ********
  • 4002
  • 371
Re: Переход по меню?
« Ответ #9 : 23.08.2015, 14:47:45 »
С чем его кушать (куда вставлять)?
Куда хотите, лишь бы он загрузился. Можно в шаблон модуля меню или в шаблон сайта. Только нужно подправить чуть-чуть, чтобы не срабатывало на всех ссылках.
  • Не будь паразитом, сделай что-нибудь самостоятельно!
  • В личке и по Skype не даю советов.

*

warlocksp

  • ******
  • 926
  • 8
  • Красота и мудрость - в простоте....
Re: Переход по меню?
« Ответ #10 : 24.08.2015, 00:41:25 »
Куда хотите, лишь бы он загрузился. Можно в шаблон модуля меню или в шаблон сайта. Только нужно подправить чуть-чуть, чтобы не срабатывало на всех ссылках.
Опробую два варианта ваш и что предложил: beliyadm
Спасибо понял...
Разработка, сопровождения, продвижение веб ресурсов...Хостинг-провайдер...
ICQ : 663021519;Skype: Warl-Uanic;Nic-Handle: Warl-Uanic.

*

warlocksp

  • ******
  • 926
  • 8
  • Красота и мудрость - в простоте....
Re: Переход по меню?
« Ответ #11 : 24.08.2015, 00:42:24 »
Есть такой вот плагин https://github.com/kswedberg/jquery-smooth-scroll
в админке для пункта меню (или в материале) задаем нужный класс и в скрипте на уровне шаблона активируем переход, будет и скролл и прокрутка и анимация
Спасибо опробуем...
Разработка, сопровождения, продвижение веб ресурсов...Хостинг-провайдер...
ICQ : 663021519;Skype: Warl-Uanic;Nic-Handle: Warl-Uanic.

*

warlocksp

  • ******
  • 926
  • 8
  • Красота и мудрость - в простоте....
Re: Переход по меню?
« Ответ #12 : 24.08.2015, 08: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, 08:52:15 от warlocksp »
Разработка, сопровождения, продвижение веб ресурсов...Хостинг-провайдер...
ICQ : 663021519;Skype: Warl-Uanic;Nic-Handle: Warl-Uanic.

*

beliyadm

  • ********
  • 8359
  • 1527
  • Севастополь == Россия
Re: Переход по меню?
« Ответ #13 : 24.08.2015, 22:36:47 »
Подскажите пожалуйста, что куда вставить и где что прописать... По пунктам, пожалуйста...
в индекс шаблона вставляете загрузку jquery.smooth-scroll.min.js
Дальше пишите js код в том же индексе шаблона (при условии подключенного Jquery)
Код: javascript
$('#tpl_top a').smoothScroll();
У каждой ссылки есть атрибут href="#tpl_section3" где tpl_section3 это ID нужного элемента страницы, до которого будет идти скролл
Все истины, которые я хочу вам изложить, — бесстыдная ложь.
Записки нетрезвого кодера || -=Joomla FAQ=- || -=все плохо=- || skype: beliyadm_pb

*

warlocksp

  • ******
  • 926
  • 8
  • Красота и мудрость - в простоте....
Re: Переход по меню?
« Ответ #14 : 25.08.2015, 08:52:58 »
в индекс шаблона вставляете загрузку jquery.smooth-scroll.min.js
Дальше пишите js код в том же индексе шаблона (при условии подключенного Jquery)
Код: javascript
$('#tpl_top a').smoothScroll();
У каждой ссылки есть атрибут href="#tpl_section3" где tpl_section3 это ID нужного элемента страницы, до которого будет идти скролл

Огромное спасибо, теперь разобрался...
Разработка, сопровождения, продвижение веб ресурсов...Хостинг-провайдер...
ICQ : 663021519;Skype: Warl-Uanic;Nic-Handle: Warl-Uanic.