Прокрутка к элементу с использованием jQuery

Question

У меня есть элемент input следующего вида:

<input type="text" class="textfield" value="" id="subject" name="subject">

Также у меня есть другие элементы, такие как теги <div> и <textarea> и т.д.

Когда пользователь кликает на <input id="subject">, страница должна плавно прокручиваться к последнему элементу, который находится внизу страницы. Я хочу, чтобы это было именно прокручивание вниз, а не вверх (то есть до низа страницы).

Последний элемент страницы — это кнопка submit с id="submit":

<input type="submit" class="submit" id="submit" name="submit" value="Ok, Done.">

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

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

Answer 1

Ваш скрипт выполняет анимацию прокрутки к элементу с ID, указанным в хэше URL, если такой элемент существует. Если в URL отсутствует хэш, скрипт просто игнорирует выполнение анимации.

Вот как это работает:

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

$(window.location.hash) получает элемент, соответствующий хэшу в текущем URL. Например, если URL - www.example.com#section2, то window.location.hash вернет #section2.
$(window.location.hash).length > 0 проверяет, существует ли элемент с таким ID на странице. Если элемента нет, условие не выполняется, и анимация не происходит.
Если элемент найден, $('html, body').animate(...) анимирует прокрутку к верхней границе этого элемента с вершины страницы (offset().top) в течение 1000 миллисекунд (1 секунды).

Таким образом, данное решение идеально подходит для плавной прокрутки к секциям на вашей странице при использовании якорных ссылок. Если у вас есть дополнительные вопросы или вам нужна помощь с настройкой скрипта, пожалуйста, дайте знать!

Answer 2

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

Однако в некоторых случаях вам может понадобиться преобразовать значение в целое число. Странно, но возвращаемое значение от $("...").offset().top иногда бывает в формате float.

Используйте: parseInt($("....").offset().top)

Например:

$("#button").click(function() {
    $('html, body').animate({
        scrollTop: parseInt($("#elementtoScrollToID").offset().top)
    }, 2000);
});

Answer 3

Ваша функция для прокрутки до элемента выглядит хорошо, но можно ещё более компактно записать её. Вот сокращенная версия решения с использованием jQuery:

$.fn.scrollTo = function (speed = 1000) {
    $('html, body').animate({
        scrollTop: this.offset().top
    }, speed);
};

Использование остаётся тем же: $('#your_element').scrollTo();

Здесь параметр speed имеет значение по умолчанию, что упрощает код и делает его более читаемым.

Answer 4

Для того чтобы прокрутить страницу к элементу с определённым ID, вы можете использовать следующий простой код на jQuery:

var targetOffset = $('#divID').offset().top;
$('html, body').animate({scrollTop: targetOffset}, 1000);

Этот код находит вертикальную позицию элемента с ID divID с помощью метода offset().top, а затем использует метод animate() для плавной прокрутки страницы к этой позиции в течение 1000 миллисекунд (1 секунды).

Не забудьте добавить jQuery на вашу страницу, если он ещё не подключен.

Прокрутка к элементу с использованием jQuery

4 ответ(ов)

Руководство по Markdown

Форматирование текста

Код

Списки

Поддерживаемые языки программирования

Популярные

Другие .NET

Базы данных