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

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

Релизация плавной прокрутки в Joomla

 (Прочитано 5983 раз)
0 Пользователей и 1 Гость смотрят эту тему.
zeus07
Завсегдатай
*****

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

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



« : 08.07.2013, 19:26:25 »

Здравствуйте!

Сайт: http://www.vector-mp.com.ua/

В статье сделаны якоры. Каждый пункт меню ведёт на свой якорь. Меню сделано через обычный модуль html-код. Необходимо реализовать плавную прокрутку к якорю от пункта меню. Как это сделать? Находил различные скрипты, реализованные на jQuery, но так и не получилось сделать задуманное.  Раньше просто не приходилось с этим сталкиваться. Если кто-то такое делал, то прошу помочь.

Заранее благодарен.
Записан
antony2606
Завсегдатай
*****

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

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


Работаем!


« Ответ #1 : 08.07.2013, 20:38:37 »

Собсна что не получилось ? )
Записан
zeus07
Завсегдатай
*****

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

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



« Ответ #2 : 08.07.2013, 20:46:25 »

Собсна что не получилось ? )
Да вот не дошло как правильно подключить скрипт, как его продублировать, чтобы работали все якори
Записан
antony2606
Завсегдатай
*****

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

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


Работаем!


« Ответ #3 : 08.07.2013, 21:00:41 »

Да вот не дошло как правильно подключить скрипт, как его продублировать, чтобы работали все якори
Тяжело в учении, легко в бою) Попробуйте это, но вроде не совсем то, что ищете. И вот в этом разделе поищите
Записан
zeus07
Завсегдатай
*****

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

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



« Ответ #4 : 08.07.2013, 21:02:09 »

Спасибо за помощь, но мне нужна НЕ кнопка Наверх, а именно, чтобы после нажатия на пункт меню плавно переезжало к якорю
Записан
antony2606
Завсегдатай
*****

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

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


Работаем!


« Ответ #5 : 08.07.2013, 21:12:16 »

Спасибо за помощь, но мне нужна НЕ кнопка Наверх, а именно, чтобы после нажатия на пункт меню плавно переезжало к якорю

Ага, тупанул( Вот тут тема столетней давности, но ссыль битая( Ну а вообще, плагины-то врятли существуют "коробочного" типа... По-любому надо по какому-нибудь мануалу руками пилить
Записан
ELLE
Support Team
*****

Репутация: +862/-0
Offline Offline

Пол: Женский
Сообщений: 4723



« Ответ #6 : 08.07.2013, 21:13:09 »

ТС-у надо по-моему типа такого (если нажать на 'оставить отзыв' или 'подробнее')
это нужно скрипт прикручивать, тут коробочных вариантов нет

а, antony2606 опередил)
Записан
antony2606
Завсегдатай
*****

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

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


Работаем!


« Ответ #7 : 08.07.2013, 21:15:09 »

ТС-у надо по-моему типа такого (если нажать на 'оставить отзыв' или 'подробнее')
это нужно скрипт прикручивать, тут коробочных вариантов нет

а, antony2606 опередил)

ахаха))) слово в слово!)) Кстати, шикарный магазинчик!
Записан
zeus07
Завсегдатай
*****

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

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



« Ответ #8 : 09.07.2013, 02:57:36 »

ту тему смотрел, но, к сожалению, ничего полезного из неё не почерпнул, желательно какое-то действующее решение
Записан
dynamit
Практически профи
*******

Репутация: +264/-0
Offline Offline

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


Winter Is Coming


« Ответ #9 : 09.07.2013, 07:42:43 »

http://www.xiper.net/collect/js-plugins/effects/scrollto.html
Записан
zeus07
Завсегдатай
*****

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

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



« Ответ #10 : 09.07.2013, 19:04:54 »

Народ, смотрите. Использую вот такой скрипт для плавного скроллинга:
Код:
$(document).ready(function() {
    $("a.topLink").click(function() {
        $("html, body").animate({
            scrollTop: $($(this).attr("href")).offset().top + "px"
        }, {
            duration: 500
        });
        return false;
    });
});
В модуле меню всем ссылкам дал класс topLink, также в index.php шаблона подключил библиотеку jQuery. Но так ничего и не работает.  Подскажите пожалуйста, в чём ошибка? 
Записан
dynamit
Практически профи
*******

Репутация: +264/-0
Offline Offline

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


Winter Is Coming


« Ответ #11 : 09.07.2013, 20:47:59 »

не пойму вы по моей ссылке не ходили что ли? там же готовое решение
Записан
zeus07
Завсегдатай
*****

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

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



« Ответ #12 : 09.07.2013, 21:53:18 »

не пойму вы по моей ссылке не ходили что ли? там же готовое решение
Дело в том, что там реализовывается это через кнопку, а мне надо, чтобы переход был к якорю
Записан
zeus07
Завсегдатай
*****

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

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



« Ответ #13 : 10.07.2013, 01:53:37 »

Всем спасибо за ответы. Оказывается, просто необходимо было добавить id для каждой ссылки в статье на главной
Записан
antony2606
Завсегдатай
*****

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

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


Работаем!


« Ответ #14 : 10.07.2013, 01:54:08 »

Всем спасибо за ответы. Оказывается, просто необходимо было добавить id для каждой ссылки в статье на главной

Поздравляю!)) Все гениальное - просто!
Получилось неплохо! Осталось только с картинками разобраться)))
Записан
zeus07
Завсегдатай
*****

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

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



« Ответ #15 : 10.07.2013, 01:54:52 »

Поздравляю!)) Все гениальное - просто!
Та да, 2 дня мучений))
Записан
GoshaSever
Захожу иногда
**

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

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



« Ответ #16 : 23.11.2013, 04:40:33 »

Та да, 2 дня мучений))
Расскажи пожалуйста подробнее, желательно по шагам))
Я парюсь уже тоже дня 2, голова кипит))
Записан
GoshaSever
Захожу иногда
**

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

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



« Ответ #17 : 25.11.2013, 00:34:07 »

Как я понимаю форумы у нас работают в одностороннем прядке))Кто понял тот сливается)
Объясняю так как было бы понятно мне.
Заходим templates/ваш шаблон
Кидаем туда два файла "jquery-2.0.3.js" и второй "jquery.scrollTo-min.js"
Далее там же заходим в "index.php" и после тега
Код
<head>
вставляем

Код
<script type="text/javascript" src="/templates/ваш шаблон/jquery-2.0.3.js"></script>
<script type="text/javascript" src="/templates/ваш шаблон/jquery.scrollTo-min.js"></script>
<script type="text/javascript">
   $(document).ready(function() {
   $("a.topLink").click(function() {
       $("html, body").animate({
           scrollTop: $($(this).attr("href")).offset().top + "px"
       }, {
           duration: 800
       });
       return false;
   });
});
</script>
 
Сохраняем.)

Теперь делаем якоря и ссылки на них.
Отключаем редактор и вставляем якорь и ссылку.
Для примера беру якорь "Gosha"

Ссылка выглядит так:
Код
<a class="topLink" href="#Gosha">Любое слово</a>
Якорь выглядит так:
Код
<a id="Gosha" class="topLink" name="Gosha"></a>

Теперь при нажатии "Любое слово" будет плавна прокрутка до якоря)
Все работает, проверено)
Теперь тема может быть закрыта;)
« Последнее редактирование: 25.11.2013, 00:46:18 от GoshaSever » Записан
Fedor Vlasenko
Профи
********

Репутация: +696/-5
Offline Offline

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


Все начинается с Value


« Ответ #18 : 25.11.2013, 03:11:25 »

http://jsfiddle.net/vlasenkofedor/2St2g/
« Последнее редактирование: 25.11.2013, 03:19:45 от Fedor Vlasenko » Записан
avantyrist
Давно я тут
****

Репутация: +3/-0
Offline Offline

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



« Ответ #19 : 13.02.2014, 18:49:09 »

Скажите пожалуйста, как убрать сам якорь из адресной строки, скролинг происходит, но в строке появляется якорь Sad сайт/катекория/статья#anhor1

На всех сайтах где есть ети скролинги почемуто якоря в адресной строке не присутствуют, у ТС также, у меня  они плодятся Sad( Помогите очень прошу!!  

Пожалуйста помогите, неужели ето такая военная тайна! Sad

« Последнее редактирование: 13.02.2014, 21:44:15 от avantyrist » Записан
Mitriy-Bug
Осваиваюсь на форуме
***

Репутация: +1/-0
Offline Offline

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


Верстка сайтов на Joomla


« Ответ #20 : 12.01.2015, 13:48:00 »

Вот отличный плагин, коробочное решение - качать и смотреть здесь
Записан
meatrich
Захожу иногда
**

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

Сообщений: 11


« Ответ #21 : 15.06.2015, 13:22:59 »

Как я понимаю форумы у нас работают в одностороннем прядке))Кто понял тот сливается)
Объясняю так как было бы понятно мне.
Заходим templates/ваш шаблон
Кидаем туда два файла "jquery-2.0.3.js" и второй "jquery.scrollTo-min.js"
Далее там же заходим в "index.php" и после тега
Код
<head>
вставляем

Код
<script type="text/javascript" src="/templates/ваш шаблон/jquery-2.0.3.js"></script>
<script type="text/javascript" src="/templates/ваш шаблон/jquery.scrollTo-min.js"></script>
<script type="text/javascript">
   $(document).ready(function() {
   $("a.topLink").click(function() {
       $("html, body").animate({
           scrollTop: $($(this).attr("href")).offset().top + "px"
       }, {
           duration: 800
       });
       return false;
   });
});
</script>
 
Сохраняем.)

Теперь делаем якоря и ссылки на них.
Отключаем редактор и вставляем якорь и ссылку.
Для примера беру якорь "Gosha"

Ссылка выглядит так:
Код
<a class="topLink" href="#Gosha">Любое слово</a>
Якорь выглядит так:
Код
<a id="Gosha" class="topLink" name="Gosha"></a>

Теперь при нажатии "Любое слово" будет плавна прокрутка до якоря)
Все работает, проверено)
Теперь тема может быть закрыта;)

Привет! Пожалуйста помогите. Сделал так как вы написали. Не получается.
Записан
vipiusss
Профи
********

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

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


Skype: renor_


« Ответ #22 : 15.06.2015, 13:27:12 »

мне вот решение понравилось: http://pcvector.net/uploads/demo/scripts/scrollup/scrollify/index.html#home
Записан
akhalex38
Осваиваюсь на форуме
***

Репутация: +1/-0
Offline Offline

Сообщений: 175


« Ответ #23 : 15.06.2015, 17:56:41 »

В чем сложность прописать нужный скрипт в шаблон /tempates/template/index.php ?
Делаем точно так же как в HTML, только в вышеуказанном файле всё прописываем.
Записан
akhalex38
Осваиваюсь на форуме
***

Репутация: +1/-0
Offline Offline

Сообщений: 175


« Ответ #24 : 15.06.2015, 17:58:11 »

Цитировать
Привет! Пожалуйста помогите. Сделал так как вы написали. Не получается.
Ошибки в консоли покажи)
Записан
Dribentsov
Новичок
*

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

Сообщений: 1


« Ответ #25 : 12.12.2015, 23:07:51 »

Есть не плохое видео. Может поможет.
Как создать Jquery якорь "Плавная прокрутка страницы".
https://www.youtube.com/watch?v=Zi947g6YglY
Записан
Страниц: [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