Скроллинг к элементу страницы с помощью jQuery. Плавный скролл к элементу — jQuery Jquery плавный переход к элементу
Привет, друзья. В этой статье мы с вами разберем jQuery событие при прокрутке страницы до определенного элемента. Если говорить другими словами, то . В этом примере мы вызовем событие, когда страница будет прокручена до футера. Тогда будем выводить небольшое всплывающее окно с плавным появлением. А так же будем закрывать его по клику. Что в него поместить, решайте сами, вариантов масса. Вот как это выглядит:
Начнем, пожалуй с HTML разметки и здесь нет ничего необычного. Все довольно просто и понятно. Большое полотно текста, внизу футер и блок с кнопкой, который будет появляться. Вот код блока:
| 1 2 3 4 5 6 7 8 9 10 | Здесь много контента... Какой-то текст. Footer |
Здесь много контента... Какой-то текст. Footer
Теперь займемся оформлением нашего скрытого блока и его кнопки:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | #block { display : none ; position : fixed ; top : 15px ; right : 15px ; color : #fff ; background : #4CAF50 ; padding : 10px ; border-radius : 5px ; width : 200px ; box-shadow : 0 13px 20px -5px #3a3a3a ; font-family : Arial; text-align : center ; } .btn{ background : #FF9800 ; border : 2px solid #795548 ; color : #fff ; border-radius : 5px ; cursor : pointer ; padding : 5px 10px ; margin-top : 10px ; font-weight : bold ; } |
#block{ display: none; position: fixed; top: 15px; right: 15px; color: #fff; background: #4CAF50; padding: 10px; border-radius: 5px; width: 200px; box-shadow: 0 13px 20px -5px #3a3a3a; font-family: Arial; text-align: center; } .btn{ background: #FF9800; border: 2px solid #795548; color: #fff; border-radius: 5px; cursor: pointer; padding: 5px 10px; margin-top: 10px; font-weight: bold; }
Теперь займемся непосредственно, что называется scroll to element. Все-таки английский язык для разработчика необходим. Стандартно подключаем jQuery. Я сделаю это через CDN, так как это будет самая актуальная версия.
А затем сам код скрипта, который и будет творить магию на странице:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | $(document) .ready (function () { var $element = $(".footer" ) ; let counter = 0 ; $(window) .scroll (function () { var scroll = $(window) .scrollTop () + $(window) .height () ; //Если скролл до конца елемента //var offset = $element.offset().top + $element.height(); //Если скролл до начала елемента var offset = $element.offset () .top if (scroll > offset && counter == 0 ) { $("#block" ) .fadeIn (500 ) ; counter = 1 ; } } ) ; $(".btn" ) .click (function () { $("#block" ) .slideUp () ; } ) ; } ) ; |
$(document).ready(function(){ var $element = $(".footer"); let counter = 0; $(window).scroll(function() { var scroll = $(window).scrollTop() + $(window).height(); //Если скролл до конца елемента //var offset = $element.offset().top + $element.height(); //Если скролл до начала елемента var offset = $element.offset().top if (scroll > offset && counter == 0) { $("#block").fadeIn(500); counter = 1; } }); $(".btn").click(function(){ $("#block").slideUp(); }); });
По умолчанию событие срабатывает, как только начало элемента, в данном случае футера, появляется в зоне видимости, но можно поменять значение, раскомментировав 7 строку и тогда функция сработает, когда прокрутка дойдет до конца элемента.
Вот таким хитрым способом можно показывать посетителям сайта ваше уникальное предложение и добавив в метрике цели, отслеживать его конверсию.
Сегодня мы вновь попрактикуемся с jQuery. Мы будем писать скрипт плавного скроллинга при нажатии на кнопку. Сделаем так чтобы при нажатии на кнопку, пользователя плавно переносило на нужный блок. Этот скрипт можно использовать для создания красивого якорного меню.
Вот скрипт, который нам понадобится.
Скрипт состоит из функции, в качестве единственного параметра которой является переменная со значением id блока, куда нужно сделать плавный переход.
Внутри функции в первой строке создается переменная offset со значение 0.
animate – позволяет выполнить пользовательскую анимацию основанную на изменении CSS свойств для выбранных элементов.
scrollTop – получает значение отступа прокрутки сверху для первого элемента в наборе.
Там где стоит 1000, указывается время продолжительности перехода. Изменив это время вы ускоряете, либо замедляете прокрутку.
Как это работает?Давайте напишем тестовый код, на котором мы попробуем наш скрипт в работе.
Document #block1 { margin: 1200px 0px 100px 0px ; } Заказать звонок! Привет! function slowScroll(id) { var offset = 0; $("html, body").animate({ scrollTop: $(id).offset().top - offset }, 1000); return false; }
Здесь обычный HTML шаблон.
Для того чтобы скрипт работал, вам необходимо подключить библиотеку jquery.
Так же для наглядности, я сделал отступ между тестируемыми элементами, чтобы показать скролл. Я не стал заморачиваться с создание отдельного файла для стилей, и записал все внутрь тега head .
Заказать звонок!
В атрибуте href указываем блок к которому нам нужно сделать переход, это прописывается на случай если плавный скролл не сработает, чтобы пользователя все ровно перенесло на выбранный блок. В событии onclick мы указываем название функции и в качестве параметра указываем id блока на который нужно сделать плавный переход.
Ты, конечно, встречал на страницах с большим количеством текста в самом низу ссылку «наверх». Или взять, допустим, содержание (при условии, что весь документ находится на одной длиннющей странице). Смысл примерно одинаков. Нажимаем на ссылку и попадаем в какое-то конкретное место документа. Фактически, программным образом перематываем скролл.
Реализовать такое с помощью якоря — пара пустяков. А что если я хочу не мгновенно попасть в нужную точку, а именно «перемотать» скролл?
Проверено в:
- IE 6-8
- Firefox 4
- Opera 10
- Safari 4
- Chrome
Реализовать программную перемотку скролла.
РешениеБудем использовать специально для этого разработанный плагин jQuery.ScrollTo. Он умеет очень многое. Например, может перематывать как главный скролл окна, так и скролл какого-нибудь . Может перематывать в определенную позицию (в пикселях или процентах) или к какому нибудь конкретному элементу (заданному, например, по ). Все это уже создано, наша задача научится этим пользоваться.
Что качать?- библиотеку jquery качаем или .
- (2.26 Kb) собственно плагин.
Подключаем библиотеки:
Прописываем в HTML кому-нибудь id — будем перематывать окно до этого элемента:
Важный заголовок
Задаем кнопку управления:
Перемотать на важный заголовок
При клике по кнопке включаем перемотку:
jQuery(document).ready(function(){ jQuery("button").click(function() { jQuery.scrollTo("#target-el"); }); });
А теперь подробнееКоманда jQuery.scrollTo() будет перематывать главный скрорлл. Если нужно перемотать скролл какого-нибудь элемента, используем запись вида jQuery("селектор").scrollTo(), например:
JQuery("div.pane").scrollTo("#target-el");
Прараметры scrollTo()Ну и как обычно, вся магия — в парметрах:
| Ось, которая будет прокручиваться, "x", "y", "xy" или "yx". "xy" — значение по умолчанию |
| Длительность анимации. |
| Название уравнения easing. |
| Если true, целевые границы и margin вычитаются. |
| Чилсо или хэш {left: x, top:y }. Это значение будет добавлено к окончательной позиции (может быть отрицательным) |
| Добавить часть высоты/ ширины элемента (также может быть отрицательным). |
| Если true, и обе оси прокручиваться, то сначала анимируется прокрутка на одной оси, а затем на другой. Порядок задает паравитр axis ("xy" или "yx") |
| Если queue=true, функция выполнится после прокрутки первой оси. |
| Функция, которая вызывается после того, как закончится вся анимация. |
При вызове scrollTo() передается три вида параметров — цель, продолжительность, настройки (порядок имеет значение).
- цель — куда именно перематывать (подробнее см. ниже);
- продолжительность — параметр duration из таблички выше;
- настройки — остальные параметры из таблички выше.
В качестве цели можно использовать:
- Просто число
- Строку ("44", "100px", "+=30px", и т.д.)
- Элемент DOM (дочерний для прокручиваемого элемента)
- Селектор
- Строка "max" для прокрутки в конец
- Строка, определяющая процент, чтобы перейти к части контейнера (например: 50% переходит в середину)
- Хеш { top:x, left:y }, x и y может быть любое число/строка из описанных выше.
Примеры вызова с параметрами.
В последнее время бешеной популярностью пользуются типы сайтов под названием 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.
- Section 1
- Section 2
- Section 3
Решение Стива и Питера работает очень хорошо.
Но в некоторых случаях вам, возможно, придется преобразовать значение в целое число. Как ни странно, возвращаемое значение из $("...").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; }); }); });
- Section 1
- Section 2
- Section 3
$("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); };
