Обзор технологий скроллинга

Getting Started

Compiled and production-ready code can be found in the directory. The directory contains development code.

1. Include Smooth Scroll on your site.

There are two versions of Smooth Scroll: the standalone version, and one that comes preloaded with polyfills for , , and , which are only supported in newer browsers.

If you’re including your own polyfills or don’t want to enable this feature for older browsers, use the standalone version. Otherwise, use the version with polyfills.

Direct Download

You can download the files directly from GitHub.

<script src="path/to/smooth-scroll.polyfills.min.js"></script>

CDN

<!-- Always get the latest version -->
<!-- Not recommended for production sites! -->
<script src="https://cdn.jsdelivr.net/gh/cferdinandi/smooth-scroll/dist/smooth-scroll.polyfills.min.js"></script>

<!-- Get minor updates and patch fixes within a major version -->
<script src="https://cdn.jsdelivr.net/gh/cferdinandi/smooth-scroll@15/dist/smooth-scroll.polyfills.min.js"></script>

<!-- Get patch fixes within a minor version -->
<script src="https://cdn.jsdelivr.net/gh/cferdinandi/smooth-scroll@15.0/dist/smooth-scroll.polyfills.min.js"></script>

<!-- Get a specific version -->
<script src="https://cdn.jsdelivr.net/gh/cferdinandi/smooth-scroll@15.0.0/dist/smooth-scroll.polyfills.min.js"></script>

NPM

You can also use NPM (or your favorite package manager).

npm install smooth-scroll

2. Add the markup to your HTML.

No special markup needed—just standard anchor links. Give the anchor location an ID just like you normally would.

<a data-scroll href="#bazinga">Anchor Link</a>
...
<div id="bazinga">Bazinga!</div>

Note: Smooth Scroll does not work with style anchors. It requires IDs.

3. Initialize Smooth Scroll.

In the footer of your page, after the content, initialize Smooth Scroll by passing in a selector for the anchor links that should be animated. And that’s it, you’re done. Nice work!

<script>
	var scroll = new SmoothScroll('a');
</script>

Note: The selector will apply Smooth Scroll to all anchor links. You can selectively target links using any other selector(s) you’d like. Smooth Scroll accepts multiple selectors as a comma separated list. Example: .

Ограничения и проблемы

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

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

Это также означает, что все части документа подчеркнуты одинаково, и важность каждой части не распознается с помощью полосы прокрутки.

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

API

Smooth Scroll includes smart defaults and works right out of the box. But if you want to customize things, it also has a robust API that provides multiple ways for you to adjust the default options and settings.

Options and Settings

You can pass options and callbacks into Smooth Scroll when instantiating.

var scroll = new SmoothScroll('a', {

	// Selectors
	ignore: '', // Selector for links to ignore (must be a valid CSS selector)
	header: null, // Selector for fixed headers (must be a valid CSS selector)
	topOnEmptyHash: true, // Scroll to the top of the page for links with href="#"

	// Speed & Duration
	speed: 500, // Integer. Amount of time in milliseconds it should take to scroll 1000px
	speedAsDuration: false, // If true, use speed as the total duration of the scroll animation
	durationMax: null, // Integer. The maximum amount of time the scroll animation should take
	durationMin: null, // Integer. The minimum amount of time the scroll animation should take
	clip: true, // If true, adjust scroll distance to prevent abrupt stops near the bottom of the page
	offset: function (anchor, toggle) {

		// Integer or Function returning an integer. How far to offset the scrolling anchor location in pixels
		// This example is a function, but you could do something as simple as `offset: 25`

		// An example returning different values based on whether the clicked link was in the header nav or not
		if (toggle.classList.closest('.my-header-nav')) {
			return 25;
		} else {
			return 50;
		}

	},

	// Easing
	easing: 'easeInOutCubic', // Easing pattern to use
	customEasing: function (time) {

		// Function. Custom easing pattern
		// If this is set to anything other than null, will override the easing option above

		// return <your formulate with time as a multiplier>

		// Example: easeInOut Quad
		return time < 0.5 ? 2 * time * time : -1 + (4 - 2 * time) * time;

	},

	// History
	updateURL: true, // Update the URL on scroll
	popstate: true, // Animate scrolling with the forward/backward browser buttons (requires updateURL to be true)

	// Custom Events
	emitEvents: true // Emit custom events

});

Custom Events

Smooth Scroll emits three custom events:

  • is emitted when the scrolling animation starts.
  • is emitted when the scrolling animation stops.
  • is emitted if the scrolling animation is canceled.

All three events are emitted on the element and bubble up. You can listen for them with the method. The object includes the and elements for the animation.

// Log scroll events
var logScrollEvent = function (event) {

	// The event type
	console.log('type:', event.type);

	// The anchor element being scrolled to
	console.log('anchor:', event.detail.anchor);

	// The anchor link that triggered the scroll
	console.log('toggle:', event.detail.toggle);

};

// Listen for scroll events
document.addEventListener('scrollStart', logScrollEvent, false);
document.addEventListener('scrollStop', logScrollEvent, false);
document.addEventListener('scrollCancel', logScrollEvent, false);

Methods

Smooth Scroll also exposes several public methods.

animateScroll()

Animate scrolling to an anchor.

var scroll = new SmoothScroll();
scroll.animateScroll(
	anchor, // Node to scroll to. ex. document.querySelector('#bazinga')
	toggle, // Node that toggles the animation, OR an integer. ex. document.querySelector('#toggle')
	options // Classes and callbacks. Same options as those passed into the init() function.
);

Example 1

var scroll = new SmoothScroll();
var anchor = document.querySelector('#bazinga');
scroll.animateScroll(anchor);

Example 2

var scroll = new SmoothScroll();
var anchor = document.querySelector('#bazinga');
var toggle = document.querySelector('#toggle');
var options = { speed: 1000, easing: 'easeOutCubic' };
scroll.animateScroll(anchor, toggle, options);

Example 3

// You can optionally pass in a y-position to scroll to as an integer
var scroll = new SmoothScroll();
scroll.animateScroll(750);

cancelScroll()

Cancel a scroll-in-progress.

var scroll = new SmoothScroll();
scroll.cancelScroll();

Note: This does not handle focus management. The user will stop in place, and focus will remain on the anchor link that triggered the scroll.

destroy()

Destroy the current initialization. This is called automatically in the method to remove any existing initializations.

var scroll = new SmoothScroll();
scroll.destroy();

Fixed Headers

If you’re using a fixed header, Smooth Scroll will automatically offset scroll distances by the header height. Pass in a valid CSS selector for your fixed header as an option to the .

If you have multiple fixed headers, pass in the last one in the markup.

<nav data-scroll-header>
	...
</nav>
...
<script>
	var scroll = new SmoothScroll('.some-selector',{
		header: ''
	});
</script>

scrollWidth/Height

Эти свойства – как , но также включают в себя прокрученную (которую не видно) часть элемента.

На рисунке выше:

  • – полная внутренняя высота, включая прокрученную область.
  • – полная внутренняя ширина, в данном случае прокрутки нет, поэтому она равна .

Эти свойства можно использовать, чтобы «распахнуть» элемент на всю ширину/высоту.

Таким кодом:

Нажмите на кнопку, чтобы распахнуть элемент:

текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст

element.style.height =

Плагин для плавной прокрутки сайта

Для решения поставленной задачи я выбрал плагин Malihu-custom-scrollbar-plugin, так как у него очень много возможностей:

  • Вертикальная и / или горизонтальная полоса прокрутки.
  • Настраиваемый импульс прокрутки.
  • Плавная прокрутка колесиком мыши.
  • Плавная прокрутка за ползунок.
  • Поддержка клавиатуры и плавная прокрутка стрелочками или PgUp/PgDn.
  • Поддержка сенсорных экранов.
  • Готовые к использованию темы.
  • Ручная настройка с помощью CSS.
  • Разные варианты отображения ползунка.
  • Возможность добавить плавный скролл различным элементам на странице, у которых он присутствует.

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

Итак, самое время посмотреть демку. Автор уже приготовил отличный вариант:

«Стоп, плавный scroll в различных блоках это хорошо, но где же сама плавная прокрутка сайта из-за который мы пришли?» — скажете вы. Спокойствие. Сейчас мы этим займемся.

Правила, их границы и области действия.

Итак, в процессе скролла, в зависимости от положения прокрутки сраницы, нам нужно применять к элементам некоторые правила. Для этого необходимо определить границы действия этих правил.

Чтобы было проще понять о чем идет речь, приведу абстрактный пример:

  1. Нужно плавно показать и плавно скрыть некоторый элемент, когда при скролле он будет входить в область видимости и выходить из нее. Элемент должен начать появляться после того, как его верхняя кромка будет на 100px выше нижней границы видимой области окна и полностью появится, когда его нижняя кромка будет на 100px выше нижней границы видимой области окна. Та же логика с исчезновением, только в симметрично обратном порядке.
  2. Элемент нужно повернуть на 180° во время скролла, пока он будет находится в зоне ±30% от центра видимой зоны.

Давайте договоримся, что мы будем называть видимую область документа словом “viewport”. К сожалению, я не могу найти короткий русский аналог этого слова 🙂

В итоге, здесь мы можем выделить 3 области действия правил c 6-ю границами. Давайте опишем их:

  1. Точка, находящаяся на 100px ниже верхней границы элемента, совпадает с нижней границей viewport (элемент начинает появляться)
  2. Точка, находящаяся на 100px выше верхней границы элемента, совпадает с нижней границей viewport (элемент заканчивает появляться)
  3. Точка, находящаяся на 30% ниже центра viewport, совпадает с центром элемента (элемент начинает поворот)
  4. Точка, находящаяся на 30% выше центра viewport, совпадает с центром элемента (элемент заканчивает поворот)
  5. Точка, находящаяся на 100px ниже верхней границы элемента, совпадает с верхней границей viewport (элемент начинает исчезать)
  6. Точка, находящаяся на 100px выше верхней границы элемента, совпадает с верхней границей viewport (элемент заканчивает исчезать)

А теперь подумайте, с чего Вы начали бы описывать всю эту логику? Даже в таком простом сценарии с одним элементом в вычислениях участвуют размер документа, размер viewport, положение viewport, размер элемента, положение элемента, положение скролла… черт возьми, как же не запутаться?

jQuery плагин прокрутки веб-страницы вверх

плавно прокручивает страницу вверх;кнопка прокрутки не видна вверху страницы, а появляется когда часть уже прокручена и исчезает после возврата к верху; имеет маленький размер и работает во всех браузерах.HTML код<a href=»#» id=»toTop«></a>
CSS#toTop {
 position:fixed;
 z-index:9999;
 bottom:10px;
 right:10px;
 background: #F4FFBF;
 border: 1px solid #ccc;
 padding: 5px;
 cursor: pointer;
 color: #666;
 text-decoration: none;
 width:100px;
}
#toTop {
 position:fixed;
 z-index:9999;
 bottom:10px;
 right:10px;
 background: url(‘…/yuor_image_64x64.png’) no-repeat;
 width: 64px;
 height: 64px;
 border: none;
 padding: 5px;
 cursor: pointer;
 color: transparent;
 text-decoration: none;
}
</head>$(function(){
  $.fn.scrollToTop=function(){
    $(this).hide().removeAttr(«href»);
    if($(window).scrollTop()!=»0″){
        $(this).fadeIn(«slow»)
  }
  var scrollDiv=$(this);
  $(window).scroll(function(){
    if($(window).scrollTop()==»0″){
    $(scrollDiv).fadeOut(«slow»)
    }else{
    $(scrollDiv).fadeIn(«slow»)
  }
  });
    $(this).click(function(){
      $(«html, body»).animate({scrollTop:0},»slow»)
    })
  }
});
$(function() {$(«#toTop»).scrollToTop();});
http://magentawave.com

Плавная прокрутка к якорю при помощи javascript

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

Начнем с того, что подключим библиотеку jquery к нашему проекту и пропишем путь к скрипту, который отвечает за плавность прокрутки:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="/js/perehod.js"></script>

С этим справились. Теперь необходимо поставить метки и якоря, к которым будет происходить прокрутка.

Я расскажу на примере меню, которое было в проекте по аренде профессиональной техники для строительных и уборочных работ. Вот его исходный код:

<nav class="top-nav">
 <ul>
   <li><a href="#top" class="scrollto">Техника для клининга</a></li>
   <li><a href="#top1" class="scrollto">Техника для строительства</a></li>
   <li><a href="#top2" class="scrollto">Акции</a></li>
 </ul>
</nav>

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

Для того, чтобы осуществлялся переход к нужному месту на сайте, достаточно добавить ссылку на идентификатор нужного блока. Давайте сделаем это.

<nav class="top-nav">
  <ul>
   <li><a href="#cleaning" class="scrollto">Техника для клининга</a></li>
   <li><a href="#building" class="scrollto">Техника для строительства</a></li>
   <li><a href="#actions" class="scrollto">Акции</a></li>
  </ul>
</nav>

Теперь необходимо задать идентификаторы ‘cleaning’, ‘building’, ‘actions’ соответствующим блокам. У меня это выглядело так:

<div id="cleaning" class="cleaning">

Обратите внимание на атрибут id=»cleaning». Он должен соответствовать идентификатору

Вот сам скрипт:

$(function () {
  $("a.scrollto").click(function () {
   let elementClick = $(this).attr("href")
   let destination = $(elementClick).offset().top;
   $("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination }, 1100);
   return false;
  });
});

Если вам, как и мне, нужно будет реализовать прокрутку к нескольким элементам, то просто ставьте идентификаторы, подобным образом и все! Очень удобный способ и простой в реализации.Я не утверждаю что он лучший, но он работает. Если кто-то сможет его упростить, сократить или как-то улучшить, буду вам очень признателен. Как по мне, так данный эффект может многим пригодиться.

Обратите внимание на то, что вначале статьи мы указали название и путь скрипта такой:

<script src="/js/perehod.js"></script>

То есть, вам необходимо создать папку в корне вашего сайта с названием js и в нее поместить файл с именем perehod.js. А уже в него вставить сам код скрипта. Это я так, на всякий случай. Вдруг кто-то не поймет.

А на сегодня — все. Теперь вы знаете, как реализовать такой классный эффект, как плавная прокрутка страницы к якорю. Всем пока!

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

HTML-разметка для плавной прокрутки страницы.

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

За основу меню взят немаркированный список , а элементами управления будут . Использование в качестве интерактивного элемента устраняет ещё одну довольно распространённую ошибку — использование для этих целей тэга (ссылки).

Запомните, это очень важно.
Как с точки зрения семантики, так и с точки зрения СЕО — тэг должен использоваться только для формирования ссылок, ведущих на другие страницы сайта или другой интернет-ресурс. Для управления элементами текущей страницы (показать / скрыть, изменить стиль, переместить, подгрузить и т.д.) должны использоваться элементы , , ,

Именно на них вешаются обработчики событий.

Исходный код разметки HTML:

JavaScript

<div class=»header»>
<div>
<div class=»headline»>
<h1>Плавное прокручивание страницы</h1>
</div>
<ul class=»menu»>
<li><span>Container 1</span></li>
<li><span>Container 2</span></li>
<li><span>Container 3</span></li>
<li><span>Container 4</span></li>
<li><span>Container 5</span></li>
<li><span>Container 6</span></li>
</ul>
</div>
</div>

<div class=»wrap»>
<div class=»box1″><h2>Container 1</h2></div>
<div class=»box2″><h2>Container 2</h2></div>
<div class=»box3″><h2>Container 3</h2></div>
<div class=»box4″><h2>Container 4</h2></div>
<div class=»box5″><h2>Container 5</h2></div>
<div class=»box6″><h2>Container 6</h2></div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<div class=»header»>

<div>

<div class=»headline»>

<h1>Плавноепрокручиваниестраницы</h1>

</div>

<ul class=»menu»>

<li><span>Container 1</span></li>

<li><span>Container 2</span></li>

<li><span>Container 3</span></li>

<li><span>Container 4</span></li>

<li><span>Container 5</span></li>

<li><span>Container 6</span></li>

</ul>

</div>

</div>

<div class=»wrap»>

<div class=»box1″><h2>Container1</h2></div>

<div class=»box2″><h2>Container2</h2></div>

<div class=»box3″><h2>Container3</h2></div>

<div class=»box4″><h2>Container4</h2></div>

<div class=»box5″><h2>Container5</h2></div>

<div class=»box6″><h2>Container6</h2></div>

</div>

Как видно из HTML-вёрстки, я не использовал ни якоря, ни ссылки на них, ни идентификаторы.

Подключения плагина

Так как выбранное решение — это jQuery плагин, то первым делом и подключим к сайту сам jQuery, если он у вас не подключен.

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  • jquery.mCustomScrollbar.concat.min.js
  • jquery.mCustomScrollbar.min.css

Получится такая структура:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Плавный скролл сайта</title>
  <meta name="author" content="DimaDV7">
  <link rel="stylesheet" href="./css/jquery.mCustomScrollbar.min.css">
</head>
<body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="./js/jquery.mCustomScrollbar.concat.min.js"></script>
</body>
</html>

После того как все подключили, нужно инициализировать скрипт:

<script>
    (function ($) {
      $(window).on("load", function () {
        $('body').mCustomScrollbar({
          theme: "dark-thin"
        });
      });
    })(jQuery);
</script>

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

body, html {
  height: 100%;
  overflow: hidden;
}

Это позволит убрать стандартную полосу прокрутки браузера и задать высоту, понятную скрипту. Не бойтесь, если подключаете к уже готовому сайту. В 99% случаев это никак не повлияет на вашу разметку.

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

  • theme: — тема для отображения скролла;
  • autoHideScrollbar — включение или отключение автоматического скрытия полосы прокрутки при неактивном состоянии;
  • autoExpandScrollbar — включение или отключение автоматического расширения полосы прокрутки при перемещении курсора или перетаскивании полосы прокрутки;
  • scrollEasing: — тип анимации;
  • mouseWheel: { scrollAmount: ‘300’ } — количество пикселей, на которое будет осуществлена прокрутка при кручении колесика мыши

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

Более простое решение для плавной прокрутки, если вам не нужны навороты

Если вам не нужны никакие дополнительные функции, кроме как плавная прокрутка при скролле колесика мыши, то воспользуйтесь плагином jQuery.scrollSpeed

Подключается точно так же как и первый, имеет всего 3 настройки и весит всего 2.6 килобайт:

$(function() {
 jQuery.scrollSpeed(100, 800, 'easeOutCubic');
})

Где первое число — это шаг прокрутки, второе число — это скорость, а третье — тип анимации.

На этом — все. Всем — пока.

Итого

У элементов есть следующие геометрические свойства (метрики):

  • – ближайший CSS-позиционированный родитель или ближайший , , , .
  • – позиция в пикселях верхнего левого угла относительно .
  • – «внешняя» ширина/высота элемента, включая рамки.
  • – расстояние от верхнего левого внешнего угла до внутренного. Для операционных систем с ориентацией слева-направо эти свойства равны ширинам левой/верхней рамки. Если язык ОС таков, что ориентация справа налево, так что вертикальная полоса прокрутки находится не справа, а слева, то включает в своё значение её ширину.
  • – ширина/высота содержимого вместе с внутренними отступами , но без полосы прокрутки.
  • – ширины/высота содержимого, аналогично , но учитывают прокрученную, невидимую область элемента.
  • – ширина/высота прокрученной сверху части элемента, считается от верхнего левого угла.

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

Оцените статью
Рейтинг автора
5
Материал подготовил
Андрей Измаилов
Наш эксперт
Написано статей
116
Добавить комментарий