Несколько примеров как сделать кнопки прокрутки страницы вверх и вниз. Для скроллинга используется jQuery функция animate.
.animate(properties, duration, easing, complete);
- properties – свойства, к которым будет применятся анимация;
- duration – время анимации, мс;
- easing – метод анимации, по умолчанию swing замедление в начале и конце или linear постоянная скорость;
- complete – функция, вызываемая после завершения анимации.
Кнопка «Вниз»
Стационарная ссылка или кнопка для прокрутки страницы в самый низ.
Освойте бесплатно наиболее простой, быстрый и гибкий способ создавать адаптивные веб-сайты.
Дизайн лендинга
Создавайте дизайн любых сайтов — для себя и на заказ!
Популярное
- Главная
- ->
- Материалы
- ->
- Плавная прокрутка страницы вверх на jQuery
Reg.ru: домены и хостинг
Крупнейший регистратор и хостинг-провайдер в России.
Более 2 миллионов доменных имен на обслуживании.
Продвижение, почта для домена, решения для бизнеса.
Более 700 тыс. клиентов по всему миру уже сделали свой выбор.
Бесплатный Курс «Практика HTML5 и CSS3»
Освойте бесплатно пошаговый видеокурс
по основам адаптивной верстки
на HTML5 и CSS3 с полного нуля.
Фреймворк Bootstrap: быстрая адаптивная вёрстка
Пошаговый видеокурс по основам адаптивной верстки в фреймворке Bootstrap.
Научитесь верстать просто, быстро и качественно, используя мощный и практичный инструмент.
Верстайте на заказ и получайте деньги.
Что нужно знать для создания PHP-сайтов?
Ответ здесь. Только самое важное и полезное для начинающего веб-разработчика.
Узнайте, как создавать качественные сайты на PHP всего за 2 часа и 27 минут!
Создайте свой сайт за 3 часа и 30 минут.
После просмотра данного видеокурса у Вас на компьютере будет готовый к использованию сайт, который Вы сделали сами.
Вам останется лишь наполнить его нужной информацией и изменить дизайн (по желанию).
Изучите основы HTML и CSS менее чем за 4 часа.
После просмотра данного видеокурса Вы перестанете с ужасом смотреть на HTML-код и будете понимать, как он работает.
Вы сможете создать свои первые HTML-страницы и придать им нужный вид с помощью CSS.
Бесплатный курс «Сайт на WordPress»
Хотите освоить CMS WordPress?
Получите уроки по дизайну и верстке сайта на WordPress.
Научитесь работать с темами и нарезать макет.
Бесплатный видеокурс по рисованию дизайна сайта, его верстке и установке на CMS WordPress!
Хотите изучить JavaScript, но не знаете, как подступиться?
После прохождения видеокурса Вы освоите базовые моменты работы с JavaScript.
Развеются мифы о сложности работы с этим языком, и Вы будете готовы изучать JavaScript на более серьезном уровне.
*Наведите курсор мыши для приостановки прокрутки.
Плавная прокрутка страницы вверх на jQuery
Размер: 20,4 Мб.
Длительность: 8 мин. 13 сек.
В этом видео мы разберем такой момент, как создание плавной прокрутки страницы вверх при клике по ссылке.
Очень часто бывает удобно воспользоваться ссылкой «Наверх», когда находишься ближе к нижней части страницы.
Можно реализовать эту возможность исключительно средствами HTML и CSS, однако в данном видео я покажу вам, как можно доработать эту функцию и сделать ее более удобной с помощью библиотеки jQuery.
JavaScript позволит нам обеспечить плавность перемещения от нижней части страницы к верхней, избежав «рывка», который происходит при использовании обычного «якоря».
Сама ссылка «Наверх» и изображение стрелки не присутствуют на странице изначально, чтобы не занимать место и не заслонять собой контент.
Появляются они лишь при прокрутке страницы вниз на определенное число пикселей, которое можно самостоятельно задавать.
Это очень удобно еще и потому, что привлекает внимание человека к интерактивному элементу на странице и он замечает, что есть возможность воспользоваться такой функцией.
Демонстрацию работы скрипта и подробный разбор кода смотрите в видео ниже.
Краткий обзор урока (все подробности смотрите в видео):
1. Первое, что нам нужно — это файл, в котором будет размещена сама ссылка «Наверх». Пусть это будет index.html.
Для того, чтобы все работало, в секции head документа нам нужно подключить файл стилей и два JavaScript-файла (о них — чуть позже):
Сначала подключаем библиотеку jQuery, затем — файл script.js с кодом, который мы пишем сами.
Также в этом файле нам нужно разместить саму ссылку, при клике по которой будет происходить плавный подъем к верхней части страницы:
2. Второе — это файл script.js, в котором мы прописываем функции, выполняющие основные действия:
Итак, сначала мы дожидаемся полной загрузки документа и скрываем нашу кнопку «Наверх», чтобы изначально ее не было видно на странице.
Далее мы фиксируем событие прокрутки окна и если прокрутка идет вниз на 700 пикселей и более, то мы плавно отображаем кнопку «Наверх» с помощью метода fadeIn. В противном случае мы ее скрываем методом fadeOut.
Во второй анонимной функции мы отслеживаем событие клика по ссылке внутри блока #back-top и применяем метод animate для плавного подъема к верхней части страницы (scrollTop:0) за 800 мс.
3. И, третье — это файл стилей. В нашем примере в нем нет ничего лишнего, поэтому стилей мало:
Из того, о чем стоит упомянуть, можно назвать значение fixed для свойства position у блока #back-top. Это позволяет нам зафиксировать положение кнопки относительно окна браузера.
Далее — это использование свойства transition для обеспечения плавности появления и исчезновения элементов. И, наконец, это использование свойства background для того, чтобы наложить изображение стрелки на наш блок «Наверх».
Вот в общем-то и все. Общую схему работы вместе с кодом я привел выше, однако если этот обзор вам не до конца понятен, то изучите полную версию урока в видеоформате на этой странице выше.
Надеюсь, данный урок был для вас полезен и, конечно же, применяйте это в своих проектах!
С уважением, Дмитрий Науменко.
P.S. Присмотритесь к премиум-урокам по различным аспектам сайтостроения, включая JavaScript, jQuery и Ajax, а также к бесплатному курсу по созданию своей CMS-системы на PHP с нуля. Все это поможет вам быстрее и проще освоить практические навыки веб-программирования:
Понравился материал и хотите отблагодарить?
Просто поделитесь с друзьями и коллегами!
Примеры и готовые решения для оформления блога и сайта. Разработка и дизайн шаблонов Blogger.
Три лучших способа сделать прокрутку вверх страницы
Кнопка и прокрутка страницы вверх через HTML и CSS.
Скрипт jQuery для плавной прокрутки страницы вверх
Плюсы — легкость скрипта, красота работы, минусы — маленький функционал, а практически его и нет-то. Ведь не всегда требуется прокрутить страницу сайта только вверх, иногда хочется предоставить пользователю возможность вернуться к месту клика по кнопке или к самому низу страницы.
Но самым жизнеспособным и несомненно лучшим выполнением данной задачи, стал jQuery плагин (очень небольшой скрипт), предложенный by Craig Wilson, Ph.Creative еще в далеком 2009 году, который во всю используется и рекламируется по сей день. Представляю его вашему вниманию.
jQuery плагин прокрутки веб-страницы вверх
Вообще, по большому счету, прям-таки плагином этот скрип назвать как-то не особо и получается из-за его совершенно небольшого размера. Но при этом, он обладает всеми необходимым функционалом. Этот скрипт:
— плавно прокручивает страницу вверх;
— кнопка прокрутки не видна вверху страницы, а появляется когда часть уже прокручена и исчезает после возврата к верху;
— имеет маленький размер и работает во всех браузерах.
Итак, HTML код для кнопки:
Вот такие три простых решения для того чтобы сделать красивую и удобную кнопку прокрутки страницы.
