Плавный скролл при прокрутке

  • 13 Ответов
  • 1023 Просмотров

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

*

deminevgen

  • Осваиваюсь на форуме
  • ***
  • 117
  • 2
Искал плагин плавного скрола и не нашёл, только до якоря. Был aikon но стал 12 баков стоить.
Взял плагин plg_smooth_scroll_v1.0 и переделал его чутка, точнее воткнул в него другой js, откуда брал не помню))
Вообщем получился плавный скрол при прокрутке + скрол до якоря плавный.
Настройки скорости скрола и плавности в файле /js/jquery.smooth-scroll.min.js
Спойлер
[свернуть]
А если установили то в \media\smooth_scroll\js
зы. Косячный не косячный я не знаю проверяйте сами. У меня работает со слайдерами на js аккордеонами итд.

*

deminevgen

  • Осваиваюсь на форуме
  • ***
  • 117
  • 2
Re: Плавный скролл при прокрутке
« Ответ #1 : 10.01.2016, 16:24:03 »
1.2
Возможность редактировать скорость и высоту шага прокрутки.

*

saharin88

  • Давно я тут
  • ****
  • 246
  • 18
  • joom.work
Re: Плавный скролл при прокрутке
« Ответ #2 : 10.01.2016, 18:18:35 »
Цитировать
Искал плагин плавного скрола и не нашёл, только до якоря
зачем какие то плагины, если там пару строк на jQuery
Код
$(function(){
   $('a[href^="#"]').click(function(){
        var target = $(this).attr('href');
        $('html, body').animate({scrollTop: $(target).offset().top}, 300);
        return false;
   });
});

*

Shustry

  • Группа развития
  • *****
  • 6426
  • 733
  • Рисую дизайны
Re: Плавный скролл при прокрутке
« Ответ #3 : 10.01.2016, 18:21:28 »
За тем, что для некоторых начинающих юзеров вставить куда-то какой-то код — непосильная задача.
Бесплатно консультирую по дизайну и вёрстке (только в личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!

*

deminevgen

  • Осваиваюсь на форуме
  • ***
  • 117
  • 2
Re: Плавный скролл при прокрутке
« Ответ #4 : 10.01.2016, 20:11:24 »
Просто я сам начинал с 0, и очень хотел плавный скрол на лендинг пейдж, но как его воткнуть понял не скоро) был aikon бесплатный та и то щас платный стал 12 баксов.
Вот с помощью форумчан сделал плагин.

*

epson950

  • Осваиваюсь на форуме
  • ***
  • 118
  • 1
Re: Плавный скролл при прокрутке
« Ответ #5 : 28.07.2017, 06:46:44 »
Очень нужен плавный скрол с кнопки до якоря, поставил данный плагин на Joomla 3.7.4 + Helix 3 v2.1. Почему то не работает :(

*

Shustry

  • Группа развития
  • *****
  • 6426
  • 733
  • Рисую дизайны
Re: Плавный скролл при прокрутке
« Ответ #6 : 28.07.2017, 14:14:09 »
Вот готовое простое решение:

зачем какие то плагины, если там пару строк на jQuery
Код
$(function(){
   $('a[href^="#"]').click(function(){
        var target = $(this).attr('href');
        $('html, body').animate({scrollTop: $(target).offset().top}, 300);
        return false;
   });
});

В принципе, в состав UIkit входит аналогичный готовый плагин.
Бесплатно консультирую по дизайну и вёрстке (только в личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!

*

epson950

  • Осваиваюсь на форуме
  • ***
  • 118
  • 1
Re: Плавный скролл при прокрутке
« Ответ #7 : 28.07.2017, 16:46:34 »
нашел решение сам на просторах инета
разжую для чайников (как я) на примере helix3
берем файл (или делаем сами из кода)
Код
jQuery(function() {
    //В следующей выборке так же просто можно прописать привязку на любой элемент
    //Сейчас "якорь" определяется по наличию символа # в ссылке
    jQuery('a[href*="#"]').click(function() {
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname){
            var target = jQuery(this.hash);target = target.length ? target : jQuery('[name=' + this.hash.slice(1) +']');
            if (target.length) {
                var scrl = target.offset().top;         //Получаем отступ от верхнего края
                var offset = 70;                        //Отступ от элемента в пикселях
                var speed = 1000;                       //Скорость прокрутки
                scrl = scrl - offset;                  
                jQuery('html, body').animate({
                    scrollTop: scrl
                }, speed);
                return false;
            }
        }
    });
});
файл anchor-smooth-scroll.js помещаем в папку со скриптами вашего шаблона (у меня ***/templates/shaper_helix3/js )
в папке ***/templates/shaper_helix3 ищем файл index.php и правим его
ищем код типа
Код
              // load CSS, less and js jquery.nav.js, smoothscroll.js,
                $this->helix3->addCSS('bootstrap.min.css, font-awesome.min.css') // CSS Files
                        ->addJS('bootstrap.min.js, jquery.sticky.js, main.js') // JS Files
и добавляем в него загрузку нужного скрипта
Код
              // load CSS, less and js jquery.nav.js, smoothscroll.js,
                $this->helix3->addCSS('bootstrap.min.css, font-awesome.min.css') // CSS Files
                        ->addJS('bootstrap.min.js, jquery.sticky.js, anchor-smooth-scroll.js, main.js') // JS Files

у меня все заработало. код предложенный Shustry почему то у меня работать отказался, хотя может быть я его не туда сувал :)
« Последнее редактирование: 28.07.2017, 18:15:26 от epson950 »

*

Shustry

  • Группа развития
  • *****
  • 6426
  • 733
  • Рисую дизайны
Re: Плавный скролл при прокрутке
« Ответ #8 : 28.07.2017, 17:23:30 »
В файл скриптов. Или прям в тело документа

Код: javascript
<script type="text/javascript">
jQuery(function($){
   $('a[href^="#"]').click(function(){
        var target = $(this).attr('href');
        $('html, body').animate({scrollTop: $(target).offset().top}, 300);
        return false;
   });
});
</script>
Бесплатно консультирую по дизайну и вёрстке (только в личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!

*

epson950

  • Осваиваюсь на форуме
  • ***
  • 118
  • 1
Re: Плавный скролл при прокрутке
« Ответ #9 : 28.07.2017, 18:20:02 »
и вот заметил
В файл скриптов. Или прям в тело документа
я еще заметил, что в вашем скрипте есть слова Top, я не програмист, но не наверх страницы ли отправляет ваш код? Это и так есть в хеликсе. Мой вариант плавно крутит из любого места до anchor

*

robert

  • Профи
  • ********
  • 4004
  • 371
Re: Плавный скролл при прокрутке
« Ответ #10 : 28.07.2017, 20:10:33 »
За домыслом в качестве вопроса
и вот заметиля еще заметил, что в вашем скрипте есть слова Top, я не програмист, но не наверх страницы ли отправляет ваш код?
сразу последовала критика
Это и так есть в хеликсе. Мой вариант плавно крутит из любого места до anchor
Вы бы проверили, как он работает, что ли?

  • Не будь паразитом, сделай что-нибудь самостоятельно!
  • В личке и по Skype не даю советов.

*

epson950

  • Осваиваюсь на форуме
  • ***
  • 118
  • 1
Re: Плавный скролл при прокрутке
« Ответ #11 : 28.07.2017, 23:08:35 »
За домыслом в качестве вопросасразу последовала критикаВы бы проверили, как он работает, что ли?
Возможно вы классный програмист, не спорю. Но учитесь читать и выражать свои мысли яснее!
Для чтения
Цитировать
код предложенный Shustry почему то у меня работать отказался
Поэтому это только домысел.
А вот ваше предложение проверить как он работает? Кто он? Что проверить то? Его код? У меня не работает! Мой (не мой, с инета) код? Работает, проверил. Чем вы не довольны то?

*

Shustry

  • Группа развития
  • *****
  • 6426
  • 733
  • Рисую дизайны
Re: Плавный скролл при прокрутке
« Ответ #12 : 29.07.2017, 00:56:36 »
Молча отказался работать? Или что-то в консоль написал? Весь листинг файла выложите.
Бесплатно консультирую по дизайну и вёрстке (только в личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!

*

epson950

  • Осваиваюсь на форуме
  • ***
  • 118
  • 1
Re: Плавный скролл при прокрутке
« Ответ #13 : 30.07.2017, 01:59:45 »
Молча отказался работать? Или что-то в консоль написал? Весь листинг файла выложите.
В общем я чайник! Ваш скрипт работает! Если его правильно применять. А тот что я написал хоть и работает, но конфликтует с Lightbox. Не могли бы вы подсказать как в вашем скрипте сделать перемотку по плавнее (медленнее). Цифру 300 менял, но что-то не особо заметно.
разобрался
Код
jQuery(function($){
   $('a[href^="#"]').click(function(){
        var target = $(this).attr('href');
        $('html, body').animate({scrollTop: $(target).offset().top-40}, 1000, 'swing');
        return false;
   });
});
« Последнее редактирование: 30.07.2017, 04:36:56 от epson950 »