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

deminevgen

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

deminevgen

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

saharin88

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

Shustry

  • Гуру
  • 6434
  • 745 / 3
Re: Плавный скролл при прокрутке
« Ответ #3 : 10.01.2016, 16:21:28 »
За тем, что для некоторых начинающих юзеров вставить куда-то какой-то код — непосильная задача.
*

deminevgen

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

epson950

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

Shustry

  • Гуру
  • 6434
  • 745 / 3
Re: Плавный скролл при прокрутке
« Ответ #6 : 28.07.2017, 12:14:09 »
Вот готовое простое решение:

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

В принципе, в состав UIkit входит аналогичный готовый плагин.
*

epson950

  • Захожу иногда
  • 119
  • 2 / 1
Re: Плавный скролл при прокрутке
« Ответ #7 : 28.07.2017, 14: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, 16:15:26 от epson950 »
*

Shustry

  • Гуру
  • 6434
  • 745 / 3
Re: Плавный скролл при прокрутке
« Ответ #8 : 28.07.2017, 15: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>
*

epson950

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

robert

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

Не будь паразитом, сделай что-нибудь самостоятельно!
*

epson950

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

Shustry

  • Гуру
  • 6434
  • 745 / 3
Re: Плавный скролл при прокрутке
« Ответ #12 : 28.07.2017, 22:56:36 »
Молча отказался работать? Или что-то в консоль написал? Весь листинг файла выложите.
*

epson950

  • Захожу иногда
  • 119
  • 2 / 1
Re: Плавный скролл при прокрутке
« Ответ #13 : 29.07.2017, 23: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, 02:36:56 от epson950 »
*

Filippyhka

  • Новичок
  • 1
  • 0 / 0
Re: Плавный скролл при прокрутке
« Ответ #14 : 30.03.2021, 09:42:27 »
зачем какие то плагины, если там пару строк на jQuery
Код
$(function(){
   $('a[href^="#"]').click(function(){
        var target = $(this).attr('href');
        $('html, body').animate({scrollTop: $(target).offset().top}, 300);
        return false;
   });
});



Спасибо!
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Плавный скроллинг и якоря (проблема)

Автор ZHMEN

Ответов: 0
Просмотров: 1377
Последний ответ 29.11.2016, 02:17:35
от ZHMEN