Веб-Острова Анатолия Куликова

Скроллинг по странице

Скроллинг по странице

В жизни каждого человека бывает такой момент, когда нам нужно реализовать на странице плавное прокручивание к нужному нам месту.

Интернет обычно выдаёт нам — назову его так — классический код скроллинга по странице, который следит за нажатиям на ссылки и вместо простого прыжка к блоку красиво к нему подкатывает. Собственно, вот он код:

Сам код хорош и к автору — кто бы ты ни был, брат — вообще нет никаких претензий. Но! Есть один момент — если у нас на странице есть ещё ссылки с href=»#», то они работать не будут. Т.е., если у вас на странице уже реализованы модальные окна, которые работают на CSS — вот они работать не будут. Как и другие ссылки с заглушкой.

Поскольку данная реализация на мой вкус одна из самых простых и изящных, от неё отказываться не хочется. И у меня есть предложение — мы задействуем всю силу html5 и воспользуемся пользовательским data-атрибутом. Назовём его data-jump (был соблазн назвать его goto в честь добрых ламповых воспоминаний об уроках информатики в школе). Берём и немного дорабатываем код:

Обратите внимание, что данный скрипт будет работать при подключенном JQuery.

Теперь поработаем над навигацией по странице. Сами ссылки, что приведут нас блоку, содержат в себе data-атрибут с именем, а самому блоку присваиваем id с таким же названием. Вот пример кода на JSFiddle.

Надеюсь, моя доработка будет полезна и пригодится.

И до встречи на Веб-Островах.

Анатолий Куликов

Анатолий Куликов

Автор блога, дизайнер, веб-разработчик

Новые статьи

Разбираемся с Яндекс.Коннектом

Разбираемся с Яндекс.Коннектом

Разбираемся с новым сервисом от Яндекса
Делаем паттерн из иконок

Делаем паттерн из иконок

Ещё один простой, но полезный онлайн-генератор
Следим за клавиатурой с помощью JS

Следим за клавиатурой с помощью JS

Отслеживаем нажатие клавиш на клавиатуре и совершаем действия
Надежность пароля в картинках

Надежность пароля в картинках

Скажи пользователю, что ты думаешь о его пароле
AI композитор Amper Music

AI композитор Amper Music

Проблем с музыкой для своих проектов больше не будет
Качаем шрифты с Google Fonts

Качаем шрифты с Google Fonts

Скачать шрифты Google Fonts бесплатно, без смс, для своего сайта

Статьи по теме

AI композитор Amper Music

AI композитор Amper Music

Проблем с музыкой для своих проектов больше не будет
Качаем шрифты с Google Fonts

Качаем шрифты с Google Fonts

Скачать шрифты Google Fonts бесплатно, без смс, для своего сайта
Красивый адрес для YouTube-канала

Красивый адрес для YouTube-канала

Создаём красивый адрес для канала и разбираемся, если ничего не получается
Модальное окно на чистом CSS

Модальное окно на чистом CSS

Создаем модальное окно на чистом CSS без использования javascript
Надежность пароля в картинках

Надежность пароля в картинках

Скажи пользователю, что ты думаешь о его пароле
Определяем устройство с помощью PHP

Определяем устройство с помощью PHP

Библиотека для определения устройства пользователя