work@lienusowl.ru

Полное портфолио: zsws.ru

Плавная прокрутка по странице по клику до нужного блока

Практически всегда на лендингах присутствует меню для навигации по странице, ниже приведу рабочий пример как реализовать данную функцию

Работает всё просто - скрипт и ссылки на странице поклику на которые скрипт плавно прокручивает страницу до нужного блока, давайте посмотрим как выглядит html структура для работы скрипта:


    
    

Код выше описывает некоторое меню которое у нас присутствует на странице, его мы будем использовать для плавной навигации. Главное для ссылок указать до какого блока с id конкретным будем листать. (#100500 к примеру)

Далее как будут выглядеть блоки до которых будет плавно скролить:

    
    
... тут некоторый контент 1
... тут еще какие нибудь блоки могут быть до которых будем скролить
... тут некоторый контент 100500

А так выглядит сам скрипт:

    
	
    
    

Да, чуть не забыл, самое главное, для работы скрипта необходимо подключить библиотеку jQuery, к примеру:

    
    

Бонус

Можно еще совсем заморочиться и окультурить меню навигационное, а именно - сделать его фиксированным и анимированным. Рабочий пример рассмотрим ниже. Для него потребуется подключить библиотеку modernizr.js

Скачать modernizr.js и стили для меню

html структура будет выглядеть так:


    
	

	
... тут некоторый контент 1
... тут еще какие нибудь блоки могут быть до которых будем скролить
... тут некоторый контент 100500