jQuery прокрутка к элементу

У меня есть этот элемент input :

  

Затем у меня есть другие элементы, такие как другие текстовые входы, текстовые поля и т. Д.

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

Последним пунктом страницы является кнопка submit с #submit :

  

Анимация не должна быть слишком быстрой и должна быть жидкой.

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

Предполагая, что у вас есть кнопка с button id, попробуйте этот пример:

 $("#button").click(function() { $([document.documentElement, document.body]).animate({ scrollTop: $("#elementtoScrollToID").offset().top }, 2000); }); 

Я получил код из статьи. Плавно прокручиваем элемент без плагина jQuery . И я проверил его на примере ниже.

    
Test

Test 2

Метод jQuery .scrollTo ()

jQuery .scrollTo (): просмотр – демонстрация, API, источник

Я написал этот легкий плагин, чтобы упростить прокрутку страницы / элемента. Он является гибким, где вы можете пройти в целевом элементе или заданном значении. Возможно, это может стать частью официального официального выпуска 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 есть ваше дело:

https://developer.mozilla.org/en-US/docs/Web/API/element.scrollIntoView

Итак, все, что вам нужно сделать, это: $("selector").get(0).scrollIntoView();

.get(0) используется, потому что мы хотим получить элемент DOM JavaScript, а не элемент DOM JQuery.

Проверьте плагин ScrollTo . Здесь вы можете увидеть демо.

Я надеюсь, что это помогает.

 jQuery(document).ready(function($) { $('a[href^="#"]').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; } ); } ); } ); 
   

Используя этот простой скрипт

 if($(window.location.hash).length > 0){ $('html, body').animate({ scrollTop: $(window.location.hash).offset().top}, 1000); } 

Сделал бы в сортировке, что если в URL-адресе обнаружен hash-тег, scrollTo анимирует его ID. Если не найден hash-тег, то игнорируйте скрипт.

Решение Стива и Питера работает очень хорошо.

Но в некоторых случаях вам может потребоваться преобразовать значение в целое число. Странно, возвращаемое значение от $("...").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(); 

Или первый видимый вход в контейнер с classом .error :

 $('.error :input:visible').first().focus(); 

Спасибо Tricia Ball за это!

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

 $("a[href^='#']").on("click", function(e) { e.preventDefault(); $("html, body").animate({ scrollTop: $($(this).attr("href")).offset().top }, 1000); }); if ($(window.location.hash).length > 1) { $("html, body").animate({ scrollTop: $(window.location.hash).offset().top }, 1000); } 

При загрузке, если в адресе есть hash, прокручиваем его.

И – всякий раз, когда вы нажимаете ссылку с hashем href например, #top , мы #top к нему.

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

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

 $('html, body').animate( { scrollTop: $target.offset().top }, duration ); 

плохой UX.

  • Анимация не отвечает на действия пользователя. Он выполняется, даже если пользователь щелкает, набирает или пытается прокручивать.

  • Если начальная точка анимации близка к целевому элементу, анимация мучительно медленная.

  • Если целевой элемент размещен около нижней части страницы, его нельзя прокручивать в верхней части windows. Затем анимация прокрутки резко останавливается, в середине движения.

Чтобы справиться с этими проблемами (и рядом других ), вы можете использовать мой плагин jQuery.scrollable . Затем вызов становится

 $( window ).scrollTo( targetPosition ); 

вот и все. Конечно, есть больше вариантов .

Что касается целевой позиции, то $target.offset().top выполняет работу в большинстве случаев. Но имейте в виду, что возвращаемое значение не учитывает границы элемента html ( см. Эту демонстрацию ). Если вам нужно, чтобы целевая позиция была точной при любых обстоятельствах, лучше использовать

 targetPosition = $( window ).scrollTop() + $target[0].getBoundingClientRect().top; 

Это работает, даже если установлена ​​граница для элемента html .

Это мой подход, абстрагирующий идентификаторы и href’s, используя универсальный селектор classов

 $(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($('[scroll]')); $('[scroll]').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 
 var scrollTo = function($parent, $element) { var topDiff = $element.position().top - $parent.position().top; $parent.animate({ scrollTop : topDiff }, 100); }; 

Анимации:

 // 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

  ....  
....

Легкий способ достижения прокрутки страницы для целевого div id

 var targetOffset = $('#divID').offset().top; $('html, body').animate({scrollTop: targetOffset}, 1000); 
 $('html, body').animate({scrollTop: Math.min( $(to).offset().top-margintop, //margintop is the margin above the target $('body')[0].scrollHeight-$('body').height()) //if the target is at the bottom }, 2000); 

Чтобы показать полный элемент (если это возможно с текущим размером windows):

 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, eg * 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); }; 

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

Последний элемент страницы – кнопка отправки с #submit

 $('#subject').click(function() { $('#submit').focus(); $('#subject').focus(); }); 

Сначала прокрутите вниз до #submit затем #submit курсор на вход, который был нажат, который имитирует прокрутку вниз и работает в большинстве браузеров. Он также не требует jQuery, поскольку он может быть написан в чистом JavaScript.

Может ли этот способ использования функции focus имитировать анимацию лучше, путем цепочки вызовов focus . Я не тестировал эту теорию, но она выглядела бы примерно так:

  
..
..
..
..

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

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

 var $scrollTo = $('#someId'), inputElem = $(''); $scrollTo.prepend(inputElem); inputElem.css({ position: 'absolute', width: '1px', height: $scrollTo.height() }); inputElem.focus(); inputElem.remove(); 

Я установил модуль scroll-element npm install scroll-element . Он работает следующим образом:

 import { scrollToElement, scrollWindowToElement } from 'scroll-element' /* scroll the window to your target element, duration and offset optional */ let targetElement = document.getElementById('my-item') scrollWindowToElement(targetElement) /* scroll the overflow container element to your target element, duration and offset optional */ let containerElement = document.getElementById('my-container') let targetElement = document.getElementById('my-item') scrollToElement(containerElement, targetElement) 

Написано с помощью следующих сообщений SO:

  • Смещение-топ-на-элемент-без-JQuery

  • scrolltop-анимация-без JQuery

Вот код:

 export const scrollToElement = function(containerElement, targetElement, duration, offset) { if (duration == null) { duration = 1000 } if (offset == null) { offset = 0 } let targetOffsetTop = getElementOffset(targetElement).top let containerOffsetTop = getElementOffset(containerElement).top let scrollTarget = targetOffsetTop + ( containerElement.scrollTop - containerOffsetTop) scrollTarget += offset scroll(containerElement, scrollTarget, duration) } export const scrollWindowToElement = function(targetElement, duration, offset) { if (duration == null) { duration = 1000 } if (offset == null) { offset = 0 } let scrollTarget = getElementOffset(targetElement).top scrollTarget += offset scrollWindow(scrollTarget, duration) } function scroll(containerElement, scrollTarget, duration) { let scrollStep = scrollTarget / (duration / 15) let interval = setInterval(() => { if ( containerElement.scrollTop < scrollTarget ) { containerElement.scrollTop += scrollStep } else { clearInterval(interval) } },15) } function scrollWindow(scrollTarget, duration) { let scrollStep = scrollTarget / (duration / 15) let interval = setInterval(() => { if ( window.scrollY < scrollTarget ) { window.scrollBy( 0, scrollStep ) } else { clearInterval(interval) } },15) } function getElementOffset(element) { let de = document.documentElement let box = element.getBoundingClientRect() let top = box.top + window.pageYOffset - de.clientTop let left = box.left + window.pageXOffset - de.clientLeft return { top: top, left: left } } 

Если вы хотите прокрутить в контейнере переполнения (вместо $('html, body') указан выше), работая также с абсолютным позиционированием, это способ:

 var elem = $('#myElement'), container = $('#myScrollableContainer'), pos = elem.position().top + container.scrollTop() - container.position().top; container.animate({ scrollTop: pos } 
  • jQuery.ajax () метод async метода устарел, что теперь?
  • обрабатывать ajax-ошибку, когда пользователь нажимает кнопку обновления
  • link_to и remote => true + jquery: Как? Помогите?
  • addClass каждый n-й
  • Динамически добавлять элемент в элемент управления jQuery Select2, который использует AJAX
  • Анимация scrollTop не работает в firefox
  • Разница между $ .getJSON () и $ .ajax () в jQuery
  • Автоматическое расширение текстового поля с помощью jQuery
  • javascript - изменить форму действия на основе выбора?
  • jQuery как отменить выбранное изменение
  • Добавление / удаление элементов из объекта JavaScript с помощью jQuery
  • Interesting Posts

    Сравнение Castle Windsor, Unity и StructureMap

    Intellij – Невозможно использовать новые classы Java 8 – Ошибка: «Использование API, зарегистрированное как @since 1.6+ ..»

    Как создать и использовать multidimensional array в Scala?

    Условно форматировать ячейку, если она содержит формулу

    Мне нужно включить и выключить питание ЖК-монитора, чтобы он оставался включенным

    Что называется ссылочным именем ColumnName, используемым в JPA?

    Как создать нового пользователя и установить привилегию для этой учетной записи в Windows 8

    Как отображать изображение, которое хранится на локальном диске?

    Вызов java-метода из c ++ в Android

    Как сделать ссылку html похожим на кнопку?

    Как узнать, что происходит с конкретным жестким диском в Windows?

    Как отменить jquery.load ()?

    Дополнение Firefox RestClient говорит Chrome: // restclient / content / how?

    Как управлять соединениями MongoDB в веб-приложении Node.js?

    bootsrap nav-bar collapsable не может заставить его работать

    Давайте будем гением компьютера.