jQuery выделите элемент
У меня есть это input элемент:
<input type="text" class="textfield" value="" id="subject" name="subject">
Затем у меня есть некоторые другие элементы, такие как другие текстовые вводы, текстовые области и т. Д.
Когда пользователь нажимает на это input с #subject, страница должна прокрутиться до последнего элемента страницы с приятной анимацией. Это должна быть прокрутка вниз, а не вверх.
Последний элемент страницы является submit кнопка с #submit:
<input type="submit" class="submit" id="submit" name="submit" value="Ok, Done.">
Анимация не должна быть слишком быстрой и плавной.
Я использую последнюю версию JQuery. Я предпочитаю не устанавливать плагин, а использовать стандартные функции jQuery для достижения этой цели.
34 ответа
Если у вас есть кнопка с идентификатором button попробуйте этот пример:
$("#button").click(function() {
$([document.documentElement, document.body]).animate({
scrollTop: $("#elementtoScrollToID").offset().top
}, 2000);
});
Я получил код из статьи. Плавно выделите элемент без плагина jQuery. И я проверил это на примере ниже.
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>
$(document).ready(function (){
$("#click").click(function (){
$('html, body').animate({
scrollTop: $("#div1").offset().top
}, 2000);
});
});
</script>
<div id="div1" style="height: 1000px; width 100px">
Test
</div>
<br/>
<div id="div2" style="height: 1000px; width 100px">
Test 2
</div>
<button id="click">Click me</button>
</html> 
jQuery.scrollTo (): View - Демо, 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: число, определяющее дополнительный интервал над целью прокрутки.
длительность: строка или число, определяющее, как долго будет выполняться анимация.
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.
Я знаю способ без JQuery:
document.getElementById("element-id").scrollIntoView();
Используя этот простой скрипт
if($(window.location.hash).length > 0){
$('html, body').animate({ scrollTop: $(window.location.hash).offset().top}, 1000);
}
Сделало бы в виде сортировки, что если в URL найден хеш-тег, 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;
} );
} );
} );<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul role="tablist">
<li class="active" id="p1"><a href="#pane1" role="tab">Section 1</a></li>
<li id="p2"><a href="#pane2" role="tab">Section 2</a></li>
<li id="p3"><a href="#pane3" role="tab">Section 3</a></li>
</ul>
<div id="pane1"></div>
<div id="pane2"></div>
<div id="pane3"></div>Я так и делаю.
document.querySelector('scrollHere').scrollIntoView({ behavior: 'smooth' })
Работает в любом браузере.
Его можно легко превратить в функцию
function scrollTo(selector) {
document.querySelector(selector).scrollIntoView({ behavior: 'smooth' })
}
Вот рабочий пример
$(".btn").click(function() {
document.getElementById("scrollHere").scrollIntoView( {behavior: "smooth" })
}).btn {margin-bottom: 500px;}
.middle {display: block; margin-bottom: 500px; color: red;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn">Scroll down</button>
<h1 class="middle">You see?</h1>
<div id="scrollHere">Arrived at your destination</div>Решение от Стива и Питера работает очень хорошо.
Но в некоторых случаях вам может потребоваться преобразовать значение в целое число. Странно, но возвращаемое значение $("...").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();
С этим решением вам не нужно никаких плагинов и не требуется никаких настроек, кроме размещения скрипта перед закрытием </body> тег.
$("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);
}
При загрузке, если в адресе есть хеш, мы переходим к нему.
И - всякий раз, когда вы нажимаете a ссылка с href например, хеш #topПерейдем к нему.
Если вы обрабатываете только прокрутку до элемента ввода, вы можете использовать focus(), Например, если вы хотите прокрутить до первого видимого ввода:
$(':input:visible').first().focus();
Или первый видимый ввод в контейнере с классом .error:
$('.error :input:visible').first().focus();
Спасибо Trish Ball за указание на это!
Простой способ добиться прокрутки страницы до цели div id
var targetOffset = $('#divID').offset().top;
$('html, body').animate({scrollTop: targetOffset}, 1000);
Если вы хотите прокрутить внутри контейнера переполнения (вместо $('html, body') ответил выше), работая также с абсолютным позиционированием, это способ сделать:
var elem = $('#myElement'),
container = $('#myScrollableContainer'),
pos = elem.position().top + container.scrollTop() - container.position().top;
container.animate({
scrollTop: pos
}
После того, как я нашел способ заставить свой код работать, я думаю, что должен немного прояснить ситуацию: Для использования:
$('html, body').animate({
scrollTop: $("#div1").offset().top
}, 2000);
вам нужно быть наверху страницы, так как $("#div1").offset().topвернет разные числа для разных позиций, к которым вы прокручиваете. Если вы уже прокручивали верхнюю часть, вам нужно указать точноеpageY значение (см. pageYопределение здесь: https://javascript.info/coordinates).
Итак, теперь проблема состоит в том, чтобы вычислить pageYзначение одного элемента. Ниже приведен пример в случае, если контейнер прокрутки является телом:
function getPageY(id) {
let elem = document.getElementById(id);
let box = elem.getBoundingClientRect();
var body = document.getElementsByTagName("BODY")[0];
return box.top + body.scrollTop; // for window scroll: box.top + window.scrollY;
}
Вышеупомянутая функция возвращает то же число, даже если вы куда-то прокручивали. Теперь, чтобы вернуться к этому элементу:
$("html, body").animate({ scrollTop: getPageY('div1') }, "slow");
Анимации:
// 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( { scrollTop: $target.offset().top }, duration );
плох UX.
Анимация не реагирует на действия пользователя. Он продолжается, даже если пользователь нажимает, касается или пытается прокрутить.
Если начальная точка анимации близка к целевому элементу, анимация мучительно медленная.
Если целевой элемент расположен в нижней части страницы, его нельзя прокрутить до верхней части окна. Анимация прокрутки внезапно останавливается в середине движения.
Для решения этих проблем (и множества других) вы можете использовать мой плагин, jQuery.scrollable. Звонок становится
$( window ).scrollTo( targetPosition );
и это все. Конечно, есть и другие варианты.
Что касается целевой позиции, $target.offset().top делает работу в большинстве случаев. Но имейте в виду, что возвращаемое значение не граничит с html элемент в учетную запись ( см. эту демонстрацию). Если вам нужно, чтобы целевая позиция была точной при любых обстоятельствах, лучше использовать
targetPosition = $( window ).scrollTop() + $target[0].getBoundingClientRect().top;
Это работает, даже если граница на html элемент установлен.
$('html, body').animate(...) не для меня на iphone, Android-браузер Chrome Safari.
Мне пришлось настроить таргетинг на корневой элемент содержимого страницы.
$ ('# 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>
<div id="content">
....
</div>
</body>
</html>
Очень простой и легкий в использовании пользовательский плагин jQuery. Просто добавьте атрибут scroll= на ваш интерактивный элемент и установите его значение в селекторе, к которому вы хотите перейти.
Вот так: <a scroll="#product">Click me</a>, Может использоваться на любом элементе.
(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"
// <a scroll="#product">Click To Scroll</a>
Это мой подход к абстракции идентификаторов и ссылок с использованием универсального селектора классов
$(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);
});
});<!-- example of a fixed nav menu -->
<ul class="nav">
<li>
<a href="#section-1" class="nav-item js-scroll-to">Item 1</a>
</li>
<li>
<a href="#section-2" class="nav-item js-scroll-to">Item 2</a>
</li>
<li>
<a href="#section-3" class="nav-item js-scroll-to">Item 3</a>
</li>
</ul>ОДИН ЛАЙНЕР
subject.onclick = e=> window.scroll({ top: submit.offsetTop, behavior: 'smooth'});
subject.onclick = e=> window.scroll({top: submit.offsetTop, behavior: 'smooth'});.box,.foot{display: flex;background:#fdf;padding:500px 0} .foot{padding:250px}<input type="text" class="textfield" value="click here" id="subject" name="subject">
<div class="box">
Some content
<textarea></textarea>
</div>
<input type="submit" class="submit" id="submit" name="submit" value="Ok, Done.">
<div class="foot">Some footer</div>Чтобы показать полный элемент (если это возможно с текущим размером окна):
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);
$('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);
var scrollTo = function($parent, $element) {
var topDiff = $element.position().top - $parent.position().top;
$parent.animate({
scrollTop : topDiff
}, 100);
};
Это ответ Атхарвы с: https://developer.mozilla.org/en-US/docs/Web/API/element.scrollIntoView. Просто хотел добавить, если ваш документ находится в iframe, вы можете выбрать элемент в родительском фрейме для просмотра в виде:
$('#element-in-parent-frame', window.parent.document).get(0).scrollIntoView();
Я написал функцию общего назначения, которая выполняет прокрутку до объекта 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);
};
Обновленный ответ с 2019 года:
$('body').animate({
scrollTop: $('#subject').offset().top - $('body').offset().top + $('body').scrollTop()
}, 'fast');
Я настроил модуль 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 сообщений:
Вот код:
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 }
}
Когда пользователь нажимает на этот ввод с помощью #subject, страница должна прокручиваться до последнего элемента страницы с хорошей анимацией. Это должна быть прокрутка вниз, а не вверх.
Последний элемент страницы - кнопка отправки с #submit
$('#subject').click(function()
{
$('#submit').focus();
$('#subject').focus();
});
Это будет сначала прокрутить вниз до #submit затем верните курсор назад к вводу, по которому щелкнули, который имитирует прокрутку вниз и работает в большинстве браузеров. Также не требуется jQuery, так как он может быть написан на чистом JavaScript.
Может ли этот способ использования focus лучше подражайте анимации, используя цепочку focus звонки. Я не проверял эту теорию, но это выглядело бы примерно так:
<style>
#F > *
{
width: 100%;
}
</style>
<form id="F" >
<div id="child_1"> .. </div>
<div id="child_2"> .. </div>
..
<div id="child_K"> .. </div>
</form>
<script>
$('#child_N').click(function()
{
$('#child_N').focus();
$('#child_N+1').focus();
..
$('#child_K').focus();
$('#child_N').focus();
});
</script>
Это сработало для меня:
var targetOffset = $('#elementToScrollTo').offset().top;
$('#DivParent').animate({scrollTop: targetOffset}, 2500);