Автор

12 05.2017
Вернуться к началу на jQuery

Вернуться к началу на jQuery


Эта ссылка «Back to top» позволяет пользователям плавно перемещаться вверх по странице. Это небольшая деталь, которая улучшает навигацию на веб-сайте с длинными страницами.

 

ДЕМО
ИСХОДНИКИ

 

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

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

 

Создание структуры

Мы вставили ссылку «К началу» в конце нашего контента перед закрывающим тегом.

<body>
<!-- all your content here -->
<a href="#0" class="cd-top">Top</a>
<!-- link to scripts here -->
</body>

 

Добавление стиля

Ссылка будет отображаться на правой стороне содержимого. Первоначально он имеет visibility:hidden; и opacity:0;.

Управление видимостью и непрозрачностью осуществляется через два класса: .cd-is-visible и .cd-fade-out.

.cd-top.cd-is-visible {
  /* the button becomes visible */
  visibility: visible;
  opacity: 1;
}
.cd-top.cd-fade-out {
  /* if the user keeps scrolling down, the button is out of focus and becomes less visible */
  opacity: .5;
}

Эти классы добавляются (или удаляются) в ссылку «Back to top» с помощью jQuery.

 

Обработка событий

В нашем .js-файле мы определили три переменные для управления видом ссылки «Back to top»:

//browser window scroll (in pixels) after which the "back to top" link is shown
var offset = 300,
	//browser window scroll (in pixels) after which the "back to top" link opacity is reduced
	offset_opacity = 1200,
	//duration of the top scrolling animation (in ms)
	scroll_top_duration = 700;

Переменная offset будет использоваться для переключения класса .cd-is-visible; вместо offset_opacity добавьте класс .cd-fade-out.

Функция верхней прокрутки реализована с использованием метода jQuery .animate () и привязана к событию «Back to top».

 

Вот и всё!


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru


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

24 06.2017
Вернуться к началу на jQuery

Представление мини-библиотеки экспериментальных эффектов прокрутки страницы.


09 04.2013
Вернуться к началу на jQuery

В данной заметке представляю весьма элегантный способ это сделать. Реализация с помощью небольшого скрипта jQuery, который позволяет плавно прокрутить страницу как вверх, так и вниз. Плюс простое решение на CSS для кнопок "Вверх" и "Вниз", без картинок.

Дынный скрипт хорош тем, как и плагин с предыдущей статьи на эту тему, что когда страница поднята вверх - кнопка "Вверх" скрыта, когда внизу - скрыта кнопка "Вниз", причем параметры высоты, на которой появляются кнопки регулируется.


28 11.2014
Вернуться к началу на jQuery

Вертикальное меню очень полезно, ведь в него может вместиться множество полезной информации. Различными блоками, меню выполненных в стиле «аккордеон», сейчас уже никого не удивишь. Предлагается масса интересных решений и техник исполнения, как с использованием jQuery, так и основанных только на CSS. В сегодняшнем уроке мы рассмотрим весьма интересное решения построение такого блока навигацией, мы добавим несколько правил анимации, при этом вертикальная навигация будет полностью рабочей и отвечать всем пользовательским запросам.


02 05.2013
Вернуться к началу на jQuery

Во время просмотра web - я заметил новые интересные библиотека - TN3. Это jQuery коллекции изображений в слайд-шоу, c эффектами перехода, несколько альбомов опций и т.д. Кроме того, вы сможете настроить его (через CSS). Сегодня я покажу вам, как можно реализовать эту галерею, чтобы создать собственный фотоальбом.


105 Публикаций

Раскрутка в соцсетях

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


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close