jQuery выделите элемент

Question

У меня есть 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 по умолчанию.

Answer 1

Это ответ Атхарвы от: https://developer.mozilla.org/en-US/docs/Web/API/element.scrollIntoView. Просто хотел добавить, если ваш документ находится в iframe, вы можете выбрать элемент в родительском фрейме для просмотра в виде:

 $('#element-in-parent-frame', window.parent.document).get(0).scrollIntoView();

Answer 2

Когда пользователь нажимает на этот ввод с #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>

Answer 3

$('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);

Answer 4

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

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);

Answer 5

Я написал функцию общего назначения, которая прокручивает либо объект 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);
};

Answer 6

Я настроил модуль 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 }
}

Answer 7

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

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

var $scrollTo = $('#someId'),
inputElem = $('<input type="text"></input>');

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

Answer 8

Обновлен ответ на 2019 год:

$('body').animate({
    scrollTop: $('#subject').offset().top - $('body').offset().top + $('body').scrollTop()
}, 'fast');

Answer 9

Это сработало для меня:

var targetOffset = $('#elementToScrollTo').offset().top;
$('#DivParent').animate({scrollTop: targetOffset}, 2500);