В этой статье пойдёт речь о создании плавной прокрутки страницы в заданном направлении. В первом варианте по стрелкам вверх вниз, во втором варианте это меню с кнопками и прокруткой до каждого раздела меню.
Для плавного перехода в двух случаях мы будем использовать скрипт.
Сразу оговорюсь, что оба варианта как кнопки Вверх-Вниз, так и меню подходят для HTML документов, поставить такое на блог или сайт в PHP можно, но реализация по сложнее…
Первый вариант удобен для HTML сайтов, простых Landing Page, у которых статьи длинные, то есть пост на пару экранов.
Кнопки Вверх-Вниз создадут дополнительное удобство пользователю.
Чтобы он не загибал лишних несколько раз свой указательный палец, достаточно щёлкнуть по кнопке и уже внизу поста, второй щелчёк по кнопке другой и уже вверху поста.
Чё бегать по этажам если можно спуститься на лифте.
Двое в лифте на первом этаже:
— Вам вверх?
— Нет, блин, вбок!!!
Скрипт прокрутки
Много на сегодня скриптов для кнопки «Вверх», я же предоставляю сразу 2 кнопки «Вверх», «Вниз»
Благодаря этому коду нам не потребуются изображения кнопок. Символы кнопок задаются юникодом, копируете и вставляете, так их на клаве не наберёшь.
| ⇧ ⇩ |
Это код кнопок, был 
, ставим в тело документа … в любое место
Далее код CSS
| position: fixed; /*позиционирование*/ z-index: 9999; /*поверх все элементов на странице*/ right: 15%; /*положение на странице, если слева — left*/ font: normal normal 42px/42px sans-serif; text-shadow: 0 1px 2px #000; .go-top { bottom: 60px; } .go-down { bottom: 10px; } box-shadow: 0 5px 0.5em -1px #666; |
В документе определите его либо в файл CSS либо просто заключите в теги …
Теперь сам скрипт
| $(function(){ if ($(window).scrollTop()>=»250″) $(«#ToTop»).fadeIn(«slow») $(window).scroll(function(){ if ($(window).scrollTop() |