2

Добрый день! Подскажите пожалуйста как делается плавный скрол к якорю на странице и как можно реализовать скрол-спай по странице средствами средствами Angular2.

aknysh
  • 58

1 Answers1

1

Есть неплохая библиотека ng2-smooth-scroll.

После установки (npm install ng2-smooth-scroll) импортируйте необходимые компоненты в модуль module.ts 

import { SmoothScrollToDirective, SmoothScrollDirective } from "ng2SmoothScroll";
...
declarations[
   ...
   SmoothScrollToDirective,
   SmoothScrollDirective,
   ...
]

В Вашем шаблоне установите якорь:

<div #my-element></div>

Ну и кнопка:

<button scrollTo="my-element">Scroll to</button>
Kostiantyn Okhotnyk
  • 5,398
  • Добрый день, спасибо за ответ, а хеш добавиться к url? или это отдельно прописывается через routerLink + fragment ну и queryParams по требованию – aknysh Sep 12 '17 at 12:01
  • либу давно использовал, но насколько помню, она без якоря идёт. Якорь пишется в href а тут элемент надо вставить <div #my-element></div>. – Kostiantyn Okhotnyk Sep 12 '17 at 12:33
  • Добрый день, у меня что то не получается прикрутить SmoothScroll к своему проекту я делаю так как вы указали и получаю ошибку Cannot read property 'callbackBefore' of undefined мне необходимо прокрутить не страницу а блок на странице это может быть как то связанно? – aknysh Sep 14 '17 at 08:51
  • @aknysh такое впечатление что вы или не установили ng2-smooth-scroll (npm install ng2-smooth-scroll) или не определили директиву в главном модуле. Вы проинсталили пакет? – Kostiantyn Okhotnyk Sep 14 '17 at 08:55
  • да я поставил локально для проекта подключил в модуле только не в базовом а в том который использую ибо он лениво грузится и что то не взлетает... и меня смущает то что webstorme не подсказывает ни чего про этот модуль... – aknysh Sep 14 '17 at 09:12
  • в браузере файлы библиотеке есть... и он не может получить значение this.callbackBefore так как this не определен... но меня больше смущает откуда он его возьмет когда там простая функция? даже если и будет this это условие ни когда не сработает if (this.callbackBefore)

    ибо там function (element){} и this будет к функции относиться а не классу

     – aknysh Sep 14 '17 at 09:19
  • Попробуйте использовать её в самой компоненте, добавив в @Component поле directives: [SmoothScrollToDirective,SmoothScrollDirective ]
    • – Kostiantyn Okhotnyk Sep 14 '17 at 09:20
  • @aknysh Соответственно importнужно сделать в этой компоненте – Kostiantyn Okhotnyk Sep 14 '17 at 09:20
  • @aknysh Стоп у Вас есть в темплейте <a callbackBefore="callbackBefore(element)">... в а самой компоненте нет callbackBefore ? – Kostiantyn Okhotnyk Sep 14 '17 at 09:23
  • я не понимаю зачем мне нужна эта функция я ее ни где не использую – aknysh Sep 14 '17 at 09:26
  • @ Component поле directives: [SmoothScrollToDirective,SmoothScrollDirective ] так же нельзя делать в angular4 – aknysh Sep 14 '17 at 09:27
  • @aknysh ага, в доке не указано, что так можно сделать, значит вы правы так нельзя сделать. Вы в темплейте указывали эту функцию при вызове директивы? – Kostiantyn Okhotnyk Sep 14 '17 at 09:49
  • @aknysh можно глянуть Ваш код где-нибудь? – Kostiantyn Okhotnyk Sep 14 '17 at 09:50
  • я тут расположил своей тестовой проект для обучения так сказать.. https://github.com/alexKnysh/AngularTest

    https://github.com/alexKnysh/AngularTest/blob/master/RxJs/src/app/app.module.ts подключение в модуле и использование https://github.com/alexKnysh/AngularTest/blob/master/RxJs/src/app/app.component.html

     – aknysh Sep 14 '17 at 12:11
  • к сожалению у меня не получилось сделать плавный скрол. Скажите пожалуйста можно взглянуть на рабочий пример использования этой библиотеке? – aknysh Sep 14 '17 at 12:45
  • нашел готовый пример только другой библиотеке... https://nolanus.github.io/ng2-page-scroll/simple#head7 – aknysh Sep 14 '17 at 13:06
  • @aknysh у меня рабочего примера нет. В либе ошибка, потому что не получиться достучаться к this в setTimeout – Kostiantyn Okhotnyk Sep 14 '17 at 13:35
  • я исправил эту ошибку заменив на стрелочные функции но все равно нет скрола... – aknysh Sep 14 '17 at 14:11