Перейти к содержимому

Фотография
- - - - -

Плавная прокрутка без скрытия якоря в ссылке


  • Вы не можете создать новую тему
  • Закрытая тема Тема закрыта
Сообщений в теме: 3

#1 Skam

Skam

    Прохожий

    Топикстартер
  • Новичок
  • 0
    4 сообщ.

Отправлено 16 Май 2018 в 00:18

Каким плагином можно реализовать плавную прокрутку без скрытия якоря в ссылке? для html сайта


  • 0

Спонсор

#2 BaNru

BaNru

    Пацифизжу

  • суперМодератор
  • 1007
    3 642 сообщ.

Отправлено 16 Май 2018 в 09:14

Не понял что значит "без скрытия якоря"?

Это реализуется на JS, можно и через jQuery, если он стоит

 

https://developer.mo...Window/scrollTo

https://learn.javasc.../metrics-window

 

На jQ плавная прокрутка делается в 3 строчки

$('html, body').animate({
    scrollTop: $("ЭЛЕМЕНТ_К_КОТОРОМУ_ПРОКРУЧИВАТЬ").offset().top
}, 500);

Есть плагин для jQ (но нужен ли он, если и так делается в 3 строки?)

http://xiper.net/col...ffects/scrollto


  • 0

#3 Skam

Skam

    Прохожий

    Топикстартер
  • Новичок
  • 0
    4 сообщ.

Отправлено 16 Май 2018 в 13:19

Не понял что значит "без скрытия якоря"?

Это реализуется на JS, можно и через jQuery, если он стоит

 

https://developer.mo...Window/scrollTo

https://learn.javasc.../metrics-window

 

На jQ плавная прокрутка делается в 3 строчки

$('html, body').animate({
    scrollTop: $("ЭЛЕМЕНТ_К_КОТОРОМУ_ПРОКРУЧИВАТЬ").offset().top
}, 500);

Есть плагин для jQ (но нужен ли он, если и так делается в 3 строки?)

http://xiper.net/col...ffects/scrollto

хм, щас проверю, но я ставил похожие скрипты, оно при плавной прокрутке не выдает в строке поиска ссылку в хешем.


  • 0

#4 BaNru

BaNru

    Пацифизжу

  • суперМодератор
  • 1007
    3 642 сообщ.

Отправлено 16 Май 2018 в 15:25

Это логично.

Любые скроллы блокируют стандартное поведение браузера, и следовательно якоря, чтобы сделать анимацию.

В таком случае надо прописывать якорь самому (скриптом) через document.location.hash или History API

 

То есть скролл на jQ будет выглядеть так

https://fiddle.jshel...BaNru/61px3v5e/

 

На чистом JS выглядит примерно также, просто добавляется цикл анимации, вместо animate. Лень писать его.


  • 0



Похожие темы Свернуть

Статистика

Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 скрытых пользователей