Представляю огромный список плагинов прокрутки на jQuery для вашего сайта. Различные трюки с прокруткой пришли к нам из-за рубежа не так давно и оцепили ряд современных порталов и сайтов, которые хотели выделиться. Работа над вертикальной прокруткой вполне может повысить конверсию и несомненно впечатление пользователя. Благодаря интересным подходам JS + CSS3 Вы можете улучшить интерфейс своего сайта. Если добавить немного фантазии, то можно из любого плагина получить что-то уникальное для своего сайта. Ведь каждый сайт старается выделиться из серой массы разными способами. Благодаря прокрутке, можно некоторые страницы перенести на страницу, с реализованным плагином, что улучшит получение важной информации пользователем. Данная технология лучше всего подойдет для различных портфолио или же демонстрации какого-либо продукта и т.д.
Переходим непосредственно к делу.
SlySly — это библиотека JavaScript для расширенной однонаправленной прокрутки с поддержкой навигации по элементам. Его можно использовать как простую замену прокрутки, так и инструмент навигации, или как отличный интерфейс навигации и анимации для сайтов параллакса.
jQuery Scroll PathЭто плагин для определения пользовательских путей прокрутки.
windows AnimateScrollAnimateScroll — это плагин jQuery, который позволяет вам прокручивать на любую часть страницы, просто вызывая функцию animatescroll () с идентификатором или классом элемента, на который вы хотите перейти.
ScrollMeПо мере прокрутки страницы ScrollMe может масштабировать, поворачивать, переводить и изменять прозрачность элементов на странице. Его легко настроить, и не требуется ни одна строка javascript.
stickUpПростой плагин, который «прикрепляет» элемент к верхней части окна браузера, прокручивая его, всегда сохраняя его в поле зрения. Этот плагин работает на многостраничных сайтах, но имеет дополнительные возможности для макетов с одним пейджером.
Block ScrollBlock Scroll — это плагин jQuery, который превращает набор элементов в блоки и отображает их по одному экрану за раз. Идея состоит в том, чтобы разбить вашу страницу на куски для лучшего представления и потока пользователей. Блокировка прокрутки автоматически изменяет вашу страницу.
StarscrollСоздайте div в качестве фона … активируйте плагин; анимация при прокрутке. Плагин автоматически установит div, чтобы он работал невидимым.
Scrolldeck ScrollocueScrollocue — это плагин jQuery для создания простой системы autocue / teleprompter для прокрутки строк текста.
scrollorama Stellar.jsStellar.js — это плагин jQuery, который обеспечивает эффекты прокрутки параллакса для любого элемента прокрутки.
Super scroll orama Parallax Responsive 3d Fold Scroll jQuery ScrollifyПлагин jQuery, который помогает прокручивать и привязывать к разделам. Совместим с Touch.
vivus.jsVivus — это легкий класс JavaScript (без зависимостей), который позволяет вам анимировать SVG, давая им возможность рисования.
jQuery slimScrollslimScroll — небольшой (4.6KB) плагин jQuery, который преобразует любой div в прокручиваемую область с красивой полосой прокрутки.
jQRangeSlider jQuery.pinВы когда-нибудь хотели прикрепить что-то к стороне текста? Вам когда-нибудь был нужен тонкий липкий элемент, который бы спокойно был закреплен, пока вы прокручиваете вниз?
jQuery.Pin здесь, чтобы помочь! Вставьте любой элемент в верхнюю часть контейнера. Легко отключите его для меньших размеров экрана, где нет места для такого рода махинаций.
Infinite AJAX Scroll OverscrollOverscroll — это плагин jQuery и polyfill для стиля прокрутки Safari mobile. Он предназначен для использования в настольных браузерах с последней версией jQuery.
jQuery.localScroll Parallax ImageScroll – jQuery pluginJQuery и совместимый с amd плагин для создания эффекта параллакса, как показано на сайте spotify.com.
fullPage.jsЛегкий и простой в использовании плагин для создания полноэкранных прокручивающихся веб-сайтов (также известных как веб-сайты одной страницы, landing page), также можно добавлять некоторые горизонтальные слайдеры внутри разделов сайта.
Parallax.js JarallaxJarallax — это библиотека JavaScript с открытым исходным кодом, которая упрощает настройку css на основе взаимодействия. С Jarallax легко создать веб-сайт с прокруткой параллаксом
jInvertScroll Jquery fullContent.jsJQuery Full Content позволяет полностью создавать веб-сайты.
jQuery One Page ScrollСоздайте веб-сайт со скроллингом на одной странице (веб-сайт iPhone 5S) с плагином прокрутки одной страницы.
jQuery Parallax PluginjQuery Parallax — это сценарий, который имитирует эффект параллакса, как показано на nikebetterworld.com.
jquery.parallax.js jquery.arbitrary-anchor.js PortfoliojsPortfoliojs — это легкий плагин галереи jQuery для ваших красивых изображений с горизонтальной прокруткой, который поддерживает настольные, планшетные и мобильные браузеры.
Scrolling Parallax PluginScrolling Parallax — новый плагин jQuery, который связывает эффект параллакса с полосами прокрутки и колесиком мыши. Это позволяет фоновому изображению или чему-либо еще прокручиваться в разном темпе, чем веб-страница, когда пользователь прокручивает. Эффект параллакса, который является результатом, — это простой способ создать иллюзию глубины на вашем веб-сайте.
Scrolltab Scrolly skrollrОтдельная библиотека прокрутки параллакса для мобильных устройств (Android + iOS) и пк. Нет jQuery. Просто обычный JavaScript (и некоторая магия).
SMINTSmint — это простой плагин jQuery, который помогает при навигации на веб-сайтах с одной страницей.
jQuery custom content scrollerДетально настраиваемый пользовательский плагин jQuery для прокрутки. Особенности включают в себя вертикальную и / или горизонтальную полосу прокрутки, настраиваемый импульс прокрутки, колесо мыши (через плагин jQuery mousewheel), поддержку клавиатуры и сенсорного экрана, готовые к использованию темы и настройку с помощью CSS, поддержку направления RTL, параметры опций для полного управление функциями прокрутки, методы запуска таких действий, как прокрутка, обновление, уничтожение и т. д.
ScrollUpBar PluginПлагин прокрутки вверх (jQuery) скрывает верхнюю панель при прокрутке вниз и показывает ее при прокрутке вверх. Это особенно полезно на мобильных интерфейсах, чтобы сэкономить драгоценное пространство.
StickyTableHeaders jQuery panelSnap isInViewport.js WaterfallПлагин jquery waterfall , такой как Pinterest, huaban.com, faxianla.com
Scroller jQuery.SerialScroll jScrolljScroll — это плагин jQuery для бесконечной прокрутки, написанный Филиппом Клаузинским. Бесконечная прокрутка; также известная как ленивая загрузка, бесконечная прокрутка, автопир, бесконечные страницы и т. д.
FoldScroll scrollUp jQuery pluginScrollUp — это легкий плагин jQuery для создания настраиваемой функции «Прокрутка вверх», которая будет работать с любым веб-сайтом с легкостью.
multiScroll.jsСоздавайте разделенные страницы с двумя вертикальными панелями прокрутки. Совместимость с мобильными телефонами и устройствами и старыми баузерами, такими как IE 8.
Any List Scroller qpScrollqpScroll — это плагин jQuery, который создает фон параллакса для любой страницы или div. Его очень легко настроить. Он может быть добавлен на любую существующую страницу без необходимости изменения маркировки HTML.
jQuery Stick ’em Parallax.jsParallax Engine реагирует на ориентацию смарт-устройства. Там, где нет оборудования для обнаружения гироскопа или обнаружения движения, вместо этого используется позиция курсора.
Slinky.jsSlinky.js — это плагин jQuery для создания красивых списков навигации для прокрутки с заголовками штабелирования.
Infinity.jsInfinity.js — это UITableView для Интернета: он ускоряет прокрутку по длинным спискам и сохраняет ваши бесконечные каналы бесперебойными и стабильными для ваших пользователей. Он небольшой, проверенный временем и высокоэффективный.
Arbitrary Anchor WaypointsWaypoints — это библиотека, которая упрощает выполнение функции всякий раз, когда вы переходите к элементу.
jQuery.kinetic Scrolling Progress BarЕсть два компонента этого эффекта. Содержание и бары. Каждый раздел содержимого имеет идентификатор, который помогает вычислять процент. Каждый бар имеет ссылку, чтобы сгладить прокрутку к этому разделу.
jQuery Smooth Div ScrollSmooth Div Scroll — это плагин jQuery, который прокручивает содержимое по горизонтали влево или вправо.
jQuery Story TaleПростой плагин jQuery, расширяющий плагин animateScroll с возможностями одиночной страницы.
jQuery Animation Scroll Plugin jQuery.ScrollTo Endless Scroll jQuery PluginБесконечная прокрутка (или infinite scrolling) является популярным методом среди веб-сайтов 2.0, таких как Google Reader и Live Image Search, где вместо подкачки через элементы, используя традиционную технику разбиения на страницы, страница просто продолжает загружать новые элементы, прикрепленные к концу.
В последнее время бешеной популярностью пользуются типы сайтов под названием Landing Page - или "лендинги". Они удобны тем, что пользователь получает всю необходимую информацию на одной странице. Чаще всего это информация о товаре, которая описывает его со всех сторон, дает понять сильные стороны и преимущества и конечно же оформить заказ.
Такие сайты получаются довольно длинными, поэтому для удобства перемещения по ним часто делают навигационное меню со ссылками на конкретные разделы. Давайте научимся делать так, чтобы при клике на ссылку, сайт плавно прокручивался до нужного места.
$("a" ) .click (function () { var elementClick = $(this ) .attr ("href" ) ; var destination = $(elementClick) .offset () .top ; $("html, body" ) .animate ({ scrollTop: destination } , 600 ) ; return false ; } ) ; Альтернативный взглядРаньше делали немного по другому - использовали определение браузера - $.browser.safari || $.browser.webkit и в зависимости от условия делали либо $("body").animate() , либо $("html").animate() . С версии 1.9 jQuery - $.browser была удалена и поэтому не сработает. Но можно модифицировать код и получить такой скрипт:
var matched, browser; jQuery.uaMatch = function ( ua ) { ua = ua.toLowerCase () ; var match = /(chrome)[ \/]([\w.]+)/ .exec ( ua ) || /(webkit)[ \/]([\w.]+)/ .exec ( ua ) || /(opera)(?:.*version|)[ \/]([\w.]+)/ .exec ( ua ) || /(msie)[\s?]([\w.]+)/ .exec ( ua ) || /(trident)(?:.*? rv:([\w.]+)|)/ .exec ( ua ) || ua.indexOf ("compatible" ) < 0 && /(mozilla)(?:.*? rv:([\w.]+)|)/ .exec ( ua ) || ; return { browser: match[ 1 ] || "" , version: match[ 2 ] || "0" } ; } ; matched = jQuery.uaMatch ( navigator.userAgent ) ; //IE 11+ fix (Trident) matched.browser = matched.browser == "trident" ? "msie" : matched.browser ; browser = { } ; if ( matched.browser ) { browser[ matched.browser ] = true ; browser.version = matched.version ; } $("a" ) .click (function () { var elementClick = $(this ) .attr ("href" ) ; var destination = $(elementClick) .offset () .top ; if (browser.chrome || browser.webkit ) { $("body" ) .animate ({ scrollTop: destination } , 600 ) ; } else { $("html" ) .animate ({ scrollTop: destination } , 600 ) ; } return false ; } ) ;Вот и все. Всем успехов!
У меня есть этот элемент input:
Затем у меня есть другие элементы, такие как другие текстовые входы, текстовые поля и т.д.
Когда пользователь нажимает на input с #subject , страница должна прокручиваться до последнего элемента страницы с помощью приятной анимации. Это должен быть свиток вниз и не вверх.
Последний элемент страницы - это кнопка submit с #submit:
Анимация не должна быть слишком быстрой и должна быть текучей.
Я запускаю последнюю версию jQuery. Я предпочитаю не устанавливать какой-либо плагин, но использовать функции jQuery по умолчанию для достижения этого.
30 ответов
Предполагая, что у вас есть кнопка с button id, попробуйте этот пример:
$("#button").click(function() { $().animate({ scrollTop: $("#elementtoScrollToID").offset().top }, 2000); });
Я написал этот легкий плагин, чтобы упростить прокрутку страницы/элемента. Он гибкий, где вы могли бы пройти в целевом элементе или заданном значении. Возможно, это может стать частью следующего официального релиза jQuery, что вы думаете?
Примеры использования
$("body").scrollTo("#target"); // Scroll screen to target element $("body").scrollTo(500); // Scroll screen 500 pixels down $("#scrollable").scrollTo(100); // Scroll individual element 100 pixels down
Параметры:
scrollTarget: элемент, строка или номер, который указывает желаемую позицию прокрутки.
offsetTop: число, определяющее дополнительный интервал выше цели прокрутки.
duration: строка или число, определяющее, как долго будет выполняться анимация.
easing: строка, указывающая, какую функцию ослабления использовать для перехода.
complete: функция для вызова после завершения анимации.
Если вас мало интересует эффект гладкой прокрутки и просто интересуется прокруткой к определенному элементу, для этого вам не требуется некоторая функция jQuery. Javascript имеет ваше дело:
Итак, все, что вам нужно сделать, это: $("selector").get(0).scrollIntoView();
Get(0) используется, потому что мы хотим получить элемент DOM JavaScript, а не элемент DOM JQuery.
Используя этот простой script
If($(window.location.hash).length > 0){ $("html, body").animate({ scrollTop: $(window.location.hash).offset().top}, 1000); }
Сделал бы в сортировке, что, если в URL-адресе найден хэш-тег, scrollTo анимирует идентификатор. Если не найден хэш-тег, то игнорируйте script.
Решение Стива и Питера работает очень хорошо.
Но в некоторых случаях вам, возможно, придется преобразовать значение в целое число. Как ни странно, возвращаемое значение из $("...").offset().top иногда находится в float .
Использование: parseInt($("....").offset().top)
Например:
$("#button").click(function() { $("html, body").animate({ scrollTop: parseInt($("#elementtoScrollToID").offset().top) }, 2000); });
Компактная версия "анимированного" решения.
$.fn.scrollTo = function (speed) { if (typeof(speed) === "undefined") speed = 1000; $("html, body").animate({ scrollTop: parseInt($(this).offset().top) }, speed); };
Основное использование: $("#your_element").scrollTo();
Если вы используете только прокрутку к элементу ввода, вы можете использовать focus() . Например, если вы хотите прокрутить до первого видимого ввода:
$(":input:visible").first().focus();
Или первый видимый вход в контейнер с классом.error:
$(".error:input:visible").first().focus();
В большинстве случаев было бы лучше использовать плагин. Шутки в сторону. Я собираюсь . Конечно, есть и другие. Но, пожалуйста, проверьте, действительно ли они избегают ловушек, для которых вам нужен плагин в первую очередь - не все из них.
Я написал о причинах использования плагина в другом месте . В двух словах, один лайнер, лежащий в основе большинства ответов здесь
$("html, body").animate({ scrollTop: $target.offset().top }, duration);
Плохой UX.
Анимация не реагирует на действия пользователя. Он выполняется, даже если пользователь щелкает, краткими или пытается прокручивать.
Если начальная точка анимации близка к целевому элементу, анимация мучительно медленная.
Если целевой элемент расположен рядом с нижней частью страницы, его нельзя прокручивать в верхнюю часть окна. Анимация прокрутки резко останавливается, затем в середине движения.
Чтобы справиться с этими проблемами (и куча других), вы можете использовать мой плагин, jQuery.scrollable . Затем вызов будет
$(window).scrollTo(targetPosition);
Что касается целевой позиции, $target.offset().top выполняет работу в большинстве случаев. Но имейте в виду, что возвращаемое значение не принимает во внимание элемент html (см. эту демонстрацию). Если вам нужно, чтобы целевая позиция была точной при любых обстоятельствах, лучше использовать
TargetPosition = $(window).scrollTop() + $target.getBoundingClientRect().top;
Это работает, даже если установлена граница с элементом html .
Это мой подход, абстрагирующий идентификатор и href"s, используя универсальный селектор классов
$(function() { // Generic selector to be used anywhere $(".js-scroll-to").click(function(e) { // Get the href dynamically var destination = $(this).attr("href"); // Prevent href="#" link from changing the URL hash (optional) e.preventDefault(); // Animate scroll to destination $("html, body").animate({ scrollTop: $(destination).offset().top }, 500); }); });
Очень простой и простой в использовании пользовательский плагин jQuery. Просто добавьте атрибут scroll= в свой элемент clickable и установите его значение для селектора, который вы хотите прокрутить.
Так же: Click me . Он может использоваться для любого элемента.
(function($){ $.fn.animateScroll = function(){ console.log($("")); $("").click(function(){ selector = $($(this).attr("scroll")); console.log(selector); console.log(selector.offset().top); $("html body").animate({scrollTop: (selector.offset().top)}, //- $(window).scrollTop() 1000); }); } })(jQuery); // RUN jQuery(document).ready(function($) { $().animateScroll(); }); // IN HTML EXAMPLE // RUN ONCLICK ON OBJECT WITH ATTRIBUTE SCROLL=".SELECTOR" // Click To Scroll
анимаций:
// slide to top of the page $(".up").click(function () { $("html, body").animate({ scrollTop: 0 }, 600); return false; }); // slide page to anchor $(".menutop b").click(function(){ //event.preventDefault(); $("html, body").animate({ scrollTop: $($(this).attr("href")).offset().top }, 600); return false; }); // Scroll to class, div $("#button").click(function() { $("html, body").animate({ scrollTop: $("#target-element").offset().top }, 1000); }); // div background animate $(window).scroll(function () { var x = $(this).scrollTop(); // freezze div background $(".banner0").css("background-position", "0px " + x +"px"); // from left to right $(".banner0").css("background-position", x+"px " +"0px"); // from right to left $(".banner0").css("background-position", -x+"px " +"0px"); // from bottom to top $("#skills").css("background-position", "0px " + -x + "px"); // move background from top to bottom $(".skills1").css("background-position", "0% " + parseInt(-x / 1) + "px" + ", 0% " + parseInt(-x / 1) + "px, center top"); // Show hide mtop menu if (x > 100) { $(".menu").addClass("menushow"); $(".menu").fadeIn("slow"); $(".menu").animate({opacity: 0.75}, 500); } else { $(".menu").removeClass("menushow"); $(".menu").animate({opacity: 1}, 500); } }); // progres bar animation simple $(".bar1").each(function(i) { var width = $(this).data("width"); $(this).animate({"width" : width + "%" }, 900, function(){ // Animation complete }); });
$("html, body").animate(...) не для меня на iphone, браузере браузера Chrome Chrome.
Мне нужно было настроить целевой элемент контента на странице.
$("# cotnent"). Анимировать (...)
Вот что я закончил с
If (navigator.userAgent.match(/(iPod|iPhone|iPad|Android)/)) { $("#content").animate({ scrollTop: $("#elementtoScrollToID").offset().top }, "slow"); } else{ $("html, body").animate({ scrollTop: $("#elementtoScrollToID").offset().top }, "slow"); }
Содержимое всего тела, связанное С#content div
.... ....
Если вы хотите выполнить прокрутку в контейнере переполнения (вместо $("html, body") , который был указан выше), работая также с абсолютным позиционированием, это способ:
Var elem = $("#myElement"), container = $("#myScrollableContainer"), pos = elem.position().top + container.scrollTop() - container.position().top; container.animate({ scrollTop: pos }
jQuery(document).ready(function($) { $("a").bind("click.smoothscroll",function (e) { e.preventDefault(); var target = this.hash, $target = $(target); $("html, body").stop().animate({ "scrollTop": $target.offset().top-40 }, 900, "swing", function () { window.location.hash = target; }); }); });
$("html, body").animate({scrollTop: Math.min($(to).offset().top-margintop, //margintop is the margin above the target $("body").scrollHeight-$("body").height()) //if the target is at the bottom }, 2000);
Чтобы показать полный элемент (если возможно, с текущим размером окна):
Var element = $("#some_element"); var elementHeight = element.height(); var windowHeight = $(window).height(); var offset = Math.min(elementHeight, windowHeight) + element.offset().top; $("html, body").animate({ scrollTop: offset }, 500);
Я написал функцию общего назначения, которая прокручивает объект jQuery, селектор CSS или числовое значение.
Пример использования:
// scroll to "#target-element": $.scrollTo("#target-element"); // scroll to 80 pixels above first element with class ".invalid": $.scrollTo(".invalid", -80); // scroll a container with id "#my-container" to 300 pixels from its top: $.scrollTo(300, 0, "slow", "#my-container");
Код функции:
/** * Scrolls the container to the target position minus the offset * * @param target - the destination to scroll to, can be a jQuery object * jQuery selector, or numeric position * @param offset - the offset in pixels from the target position, e.g. * pass -80 to scroll to 80 pixels above the target * @param speed - the scroll speed in milliseconds, or one of the * strings "fast" or "slow". default: 500 * @param container - a jQuery object or selector for the container to * be scrolled. default: "html, body" */ jQuery.scrollTo = function (target, offset, speed, container) { if (isNaN(target)) { if (!(target instanceof jQuery)) target = $(target); target = parseInt(target.offset().top); } container = container || "html, body"; if (!(container instanceof jQuery)) container = $(container); speed = speed || 500; offset = offset || 0; container.animate({ scrollTop: target + offset }, speed); };
Reg.ru: домены и хостинг
Крупнейший регистратор и хостинг-провайдер в России.
Более 2 миллионов доменных имен на обслуживании.
Продвижение, почта для домена, решения для бизнеса.
Более 700 тыс. клиентов по всему миру уже сделали свой выбор.
Фреймворк Bootstrap: быстрая адаптивная вёрстка
Пошаговый видеокурс по основам адаптивной верстки в фреймворке Bootstrap.
Научитесь верстать просто, быстро и качественно, используя мощный и практичный инструмент.
Верстайте на заказ и получайте деньги.
*Наведите курсор мыши для приостановки прокрутки.
Назад Вперед
Плавная прокрутка страницы вверх на jQueryВ этом видео мы разберем такой момент, как создание плавной прокрутки страницы вверх при клике по ссылке.
Очень часто бывает удобно воспользоваться ссылкой "Наверх", когда находишься ближе к нижней части страницы.
Можно реализовать эту возможность исключительно средствами HTML и CSS, однако в данном видео я покажу вам, как можно доработать эту функцию и сделать ее более удобной с помощью библиотеки jQuery.
JavaScript позволит нам обеспечить плавность перемещения от нижней части страницы к верхней, избежав "рывка", который происходит при использовании обычного "якоря".
Появляются они лишь при прокрутке страницы вниз на определенное число пикселей, которое можно самостоятельно задавать.
Это очень удобно еще и потому, что привлекает внимание человека к интерактивному элементу на странице и он замечает, что есть возможность воспользоваться такой функцией.
Демонстрацию работы скрипта и подробный разбор кода смотрите в видео ниже.
Краткий обзор урока (все подробности смотрите в видео):
index.html
1. Первое , что нам нужно - это файл, в котором будет размещена сама ссылка "Наверх". Пусть это будет index.html .
Для того, чтобы все работало, в секции head документа нам нужно подключить файл стилей и два JavaScript-файла (о них - чуть позже):
Сначала подключаем библиотеку jQuery, затем - файл script.js с кодом, который мы пишем сами.
Также в этом файле нам нужно разместить саму ссылку, при клике по которой будет происходить плавный подъем к верхней части страницы:
Наверх
script.js
2. Второе - это файл script.js, в котором мы прописываем функции, выполняющие основные действия:
$(document).ready(function(){ $(function (){ $("#back-top").hide(); $(window).scroll(function (){ if ($(this).scrollTop() > 700){ $("#back-top").fadeIn(); } else{ $("#back-top").fadeOut(); } }); $("#back-top a").click(function (){ $("body,html").animate({ scrollTop:0 }, 800); return false; }); }); });
Итак, сначала мы дожидаемся полной загрузки документа и скрываем нашу кнопку "Наверх", чтобы изначально ее не было видно на странице.
Далее мы фиксируем событие прокрутки окна и если прокрутка идет вниз на 700 пикселей и более, то мы плавно отображаем кнопку "Наверх" с помощью метода fadeIn . В противном случае мы ее скрываем методом fadeOut .
Во второй анонимной функции мы отслеживаем событие клика по ссылке внутри блока #back-top и применяем метод animate для плавного подъема к верхней части страницы (scrollTop:0) за 800 мс.
style.css
3. И, третье - это файл стилей. В нашем примере в нем нет ничего лишнего, поэтому стилей мало:
Body { font-size: 13px; line-height: 1.65em; font-family: Verdana, sans-serif; } p { margin-left: 150px; } /* Кнопка наверх */ #back-top{ position:fixed; bottom:10px; left: 0px; } #back-top a{ width:55px; display:block; text-align:center; font:11px/100% Arial, Helvetica, sans-serif; text-transform:uppercase; text-decoration:none; background-color: transparent; -webkit-transition:1s; -moz-transition:1s; transition:1s; } /* графическая стрелка */ #back-top span{ width:55px; height:1600px; display:block; margin-bottom:7px; background: url("../img/up-arrow.png") no-repeat bottom center; -webkit-transition:1s; -moz-transition:1s; transition:1s; } #back-top a:hover span{background-color: rgba(0, 0, 0, 0.3);}
Из того, о чем стоит упомянуть, можно назвать значение fixed для свойства position у блока #back-top . Это позволяет нам зафиксировать положение кнопки относительно окна браузера.
Как всё начиналосьHTML код кнопок:
Вверх
Вниз
CSS стили:
#up
{
width:60px;
height:60px;
position:fixed;
bottom:50px;
left:20px;
background-color:#000000;
border-radius:30px;
}
#down
{
width:60px;
height:60px;
position:fixed;
bottom:50px;
left:90px;
background-color:#000000;
border-radius:30px;
}
.pPageScroll
{
color:#FFFFFF;
font:bold 12pt "Comic Sans MS";
text-align:center;
}
В итоге мы имеем два круга с надписями «Вверх» и «Вниз» в левом нижнем углу браузера.
Проблемы начинаются Теперь начинается самое интересное – JavaScript, а точнее jQuery. Как известно, для организации скроллинга выполняются манипуляции над свойствами scrollTop и scrollLeft. В jQuery эти манипуляции осуществляются при помощи методов.scrollTop() и.scrollLeft() соответственно. Нас интересует только.scrollTop.
//Обработка нажатия на кнопку "Вверх"
$("#up").click(function(){
//Необходимо прокрутить в начало страницы
$("body").animate({"scrollTop":0},"slow");
});
//Обработка нажатия на кнопку "Вниз"
$("#down").click(function(){
//Необходимо прокрутить в конец страницы
var height=$("body").height();
$("body").animate({"scrollTop":height},”slow”);
});
Всё, ну очень просто и незатейливо. Но, вот незадача, если в Chrom’е всё было довольно безоблачно и симпатично, в Oper’е тоже довольно сносно (прокрутка вверх осуществлялась мгновенно), то «ВредныйЛис» скролиться отказывался напрочь. Не долго думая, заменив в строчке: $(«body»).animate «body» на «html», я изменил ситуации кардинально: FireFox заработал, Opera перестал рывком прокручивать вверх и стал делать это плавно, но теперь уже Chrome перестал реагировать на манипуляции с кнопками. Из приведённых выше мытарств последовал следующий вариант перевариваемый всеми браузерами: $(«html,body»).animate… Других приемлемых способов осуществлять скроллинг, работающих во всех браузерах найдено не было.
Добавим рюшечек и бантиков С самой простой частью разобрались. Базовый функционал получен, теперь можно придумать, что-нибудь поинтереснее. Первое же, что бросается в глаза, так это скорость скроллинга. При наличии сколь бы то ни было насыщенного контента, использование скроллинга становится настоящим тестом на склонность к эпилепсии. Поэтому, хочется, чтобы скроллинг был более плавным. Решение в лоб, задать определённую константу времени за которое должен осуществляться скроллинг. Очевидный плюс: элементарность решения. Не менее очевидный минус: никак не учитывается объём контента. Разумное решение: вычислять время выполнения скроллинга в зависимости от размера контента. Приступим.
$(document).ready(function(){
//Обработка нажатия на кнопку "Вверх"
$("#up").click(function(){
//Необходимо прокрутить в начало страницы
var scrollTime=curPos/1.73;
$("body,html").animate({"scrollTop":0},scrollTime);
});
//Обработка нажатия на кнопку "Вниз"
$("#down").click(function(){
//Необходимо прокрутить в конец страницы
var curPos=$(document).scrollTop();
var height=$("body").height();
var scrollTime=(height-curPos)/1.73;
$("body,html").animate({"scrollTop":height},scrollTime);
});
});
Дополнительно, можно навешать коэффициенты, на которые бы помножалось время или скорость в зависимости от пути для обеспечения больше гибкости, но на этом я уже не буду останавливаться.
Резюме В итоге мы получили очень простую реализацию скроллинга страницы, которая работает в любом современном браузере.UPD: Поправлен итоговый пример.