Как определить, на сколько процентов прокручена страница на jQuery/JavaScript?
Несложная задачка, с которой я столкнулся не так давно и, кажется, впервые. Для её решения я прибёг к небольшим математическим операциям, которыми (и результатом в целом) с удовольствием с вами сегодня поделюсь.
Прежде чем писать код, давайте немного обратимся к теории.
Как посчитать, сколько процентов составляет одно число от другого?
Для того чтобы найти процентное соотношение (отношение) двух чисел, нужно отношение этих чисел умножить на 100.
Рассмотрим небольшой пример, приближенный к нашей задаче. Нам даны два значения: 900 (пусть это будет высота страницы) и 260 (прокрученное расстояние).
Найдем процентное соотношение этих чисел. По определению, получаем следующее выражение:
(260 / 900) * 100 = 28,8888888889Округлим до 28,89% и получим результат, который показывает, сколько в процентах число 260 составляет от 900.
Условно, можно сказать, что 28,89% – это то, насколько (в процентах) была прокручена страница, имей она такие параметры (высоту и прокрученное расстояние).
Логика понятна? Если нет – пишите в комментариях. Именно такой подход с небольшой доработкой мы будем использовать в написании нашего кода.
Как определить, на сколько процентов прокручена страница на jQuery?
Итак, рассмотрев, я считаю, довольно конкретный пример, всё, что нам остаётся сделать – это написать код, который, в конечном итоге, выглядит следующим образом:
function getScrollPercentage() {
/*
$(window).scrollTop() - прокрученное расстояние от начала страницы до верхнего края окна браузера
$(window).height() - высота окна браузера
$(document).height() - высота страницы
*/
return (($(window).scrollTop() / ($(document).height() - $(window).height())) * 100);
}
$(function() {
$(window).on("scroll", function() {
// Выполняем действие при каждой прокрутке страницы
alert(getScrollPercentage()); // Выводим результат на экран
});
});Ранее я говорил о небольшой доработке. Здесь за неё отвечает часть:
- $(window).height()Дело в том, что прокрученное расстояние (в нашем случае) считается от начала страницы до верхнего края окна браузера и, спустившись до самого конца, вы не получите логичное значение в 100%. Вычтя из высоты страницы значение равное высоте окна браузера, мы дорабатываем этот момент.
Хорошо, мы получили процент, на который человек прокрутил страницу. Что дальше? Давайте выполним какое-нибудь действие, например, выведем сообщение:
function getScrollPercentage() {
return (($(window).scrollTop() / ($(document).height() - $(window).height())) * 100);
}
var scrollEvent = false; // Сообщение ещё не выводилось
$(function() {
$(window).on("scroll", function() {
if(!scrollEvent && getScrollPercentage() > 50) {
// Выводим сообщение, если ранее этого не происходило и страница прокручена больше чем на 50%
alert("Поздравляем, Вы просмотрели больше половины страницы!");
scrollEvent = true; // Сообщение вывелось
}
});
});Здесь я добавил дополнительную проверку, которая выводит сообщение только один раз. Уберите её, чтобы понять, зачем так было сделано.
Вот, собственно, и всё. С помощью этого подхода можно поставить, например, цель Яндекс.Метрики или Google Аналитики, отследив тем самым одно из потенциально целевых действий – просмотр определённого процента страницы.
Как определить, на сколько процентов прокручена страница на JavaScript?
Не буду здесь особо ничего комментировать, всё по подобию с предыдущим вариантом:
function getScrollPercentage() {
/*
scrollTop - прокрученное расстояние от начала страницы до верхнего края окна браузера
windowHeight - высота окна браузера
documentHeight - высота страницы
*/
let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
let windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
let documentHeight = Math.max(
document.body.scrollHeight, document.body.offsetHeight, document.body.clientHeight,
document.documentElement.scrollHeight, document.documentElement.offsetHeight, document.documentElement.clientHeight
);
return ((scrollTop / (documentHeight - windowHeight)) * 100);
}
document.addEventListener("DOMContentLoaded", function() {
window.onscroll = function() {
// Выполняем действие при каждой прокрутке страницы
alert(getScrollPercentage()); // Выводим результат на экран
};
});И пример с выполнением какого-либо действия при достижении (преодолении) нужного процента:
function getScrollPercentage() {
let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
let windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
let documentHeight = Math.max(
document.body.scrollHeight, document.body.offsetHeight, document.body.clientHeight,
document.documentElement.scrollHeight, document.documentElement.offsetHeight, document.documentElement.clientHeight
);
return ((scrollTop / (documentHeight - windowHeight)) * 100);
}
var scrollEvent = false; // Сообщение ещё не выводилось
document.addEventListener("DOMContentLoaded", function() {
window.onscroll = function() {
if(!scrollEvent && getScrollPercentage() > 50) {
// Выводим сообщение, если ранее этого не происходило и страница прокручена больше чем на 50%
alert("Поздравляем, Вы просмотрели больше половины страницы!");
scrollEvent = true; // Сообщение вывелось
}
};
});Если что-то вам показалось непонятным или у вас есть свои способы определения прокрученного процента страницы – пишите об этом в комментариях, будет интересно посмотреть.
