Как сделать скролл js
Обновлено: 08.07.2024
Считай, у меня есть список вопросов. Когда я нажимаю на первый вопрос, он автоматически переводит меня в конец страницы.
На самом деле, я знаю, что это можно сделать с помощью jQuery.
Итак, не могли бы вы предоставить мне некоторую документацию или ссылки, где я могу найти ответ на этот вопрос?
РЕДАКТИРОВАТЬ: необходимо прокрутить до определенного элемента HTML в нижней части страницы
21 ответ
JQuery не является необходимым. Большинство главных результатов, которые я получил от поиска Google, дали мне этот ответ:
Там, где у вас есть вложенные элементы, документ может не прокручиваться. В этом случае вам нужно нацелиться на элемент, который прокручивается, и вместо этого использовать его высоту прокрутки.
Вы можете связать это с onclick событием вашего вопроса (т.е.
Некоторые дополнительные источники, на которые вы можете взглянуть:
Очень простой способ
Вызывайте эту функцию, когда хотите прокрутить вниз.
Иногда страница распространяется при прокрутке вниз (например, в социальных сетях), чтобы прокрутить вниз до конца (конечная нижняя часть страницы), я использую этот скрипт:
И если вы находитесь в консоли javascript браузера, может быть полезно иметь возможность остановить прокрутку, поэтому добавьте:
А затем используйте stopScroll(); .
Если вам нужно прокрутить до определенного элемента, используйте:
Или универсальный скрипт для автопрокрутки до определенного элемента (или остановки интервала прокрутки страницы):
Вы можете сделать это тоже с анимацией, это очень просто
Надежда помогает, спасибо
Для прокрутки вниз в Selenium используйте код ниже:
До нижнего выпадающего списка прокрутите до высоты страницы. Используйте приведенный ниже код JavaScript, который будет хорошо работать как в JavaScript, так и в React.
Это будет гарантированная прокрутка вниз
Головные коды
Код тела
Если вы хотите прокрутить всю страницу до конца:
Если вы хотите прокрутить элемент до конца:
И вот как это работает:
Вы можете использовать эту функцию везде, где вам нужно ее вызвать:
Одна картинка стоит тысячи слов:
Примере:
Вы можете сравнить разницу, если нет scrollTo() :
Один вкладыш для плавной прокрутки вниз
Для прокрутки вверх просто установите top на 0
Вы можете попробовать Gentle Anchors хороший плагин для JavaScript.
Пример:
Тестирование на совместимость:
- Mac Firefox, Safari, Opera
- Windows Firefox, Opera, Safari, Internet Explorer 5.55+
- Linux не тестировался, но с Firefox должен быть как минимум
Поздно к вечеринке, но вот простой код только для javascript для прокрутки любого элемента вниз:
Если кто-то ищет Angular
Вам просто нужно прокрутить вниз, чтобы добавить это к вашему div
1e10 - это большое число. так что это всегда конец страницы.
Вы можете использовать это, чтобы перейти вниз по странице в формате анимации.
Реализация Vanilla JS:
Ниже должно быть кросс-браузерное решение. Он был протестирован на Chrome, Firefox, Safari и IE11
Window.scrollTo ( 0 , document.body.scrollHeight ) ; не работает в Firefox, по крайней мере для Firefox 37.0.2
Вы можете присоединить любой id к ссылочному атрибуту href элемента ссылки:
В приведенном выше примере, когда пользователь нажимает Click me внизу страницы, навигация переходит к самому Click me .
Далее представлена кроссбраузерная реализация скроллинга страницы средствами jQuery.
Как всё начиналось
В последнее время на многих сайтах можно увидеть в той или иной вариации кнопки для прокручивания страницы вверх или вниз. Смотрится это довольно мило, удобно в использовании, и просто в реализации. Столкнувшись с проблемой прокрутки объёмного контента в очередном разрабатываемом проекте, решил реализовать подобную функциональность.
Задача была следующая: сделать две кнопки. По нажатию на одну осуществлять прокрутку страницы в самое начало, по нажатию на другую – в самый конец. Также было решено дополнительно реализовать возможности чисто визуального характера, типа анимации, исчезновения кнопок и прочее, здесь я останавливаться на этом не буду, так как тема это – кросбраузерность. Собственно это стало основной проблемой в процессе написания кода.
Нарисовав симпатичные кнопочки, прикрутив анимацию и исчезновение кнопок, и реализовав собственно саму прокрутку, я обнаружил, что в разных браузерах наблюдаются проблемы со скроллингом. Раздосадованный (и почему-то ни капли не удивленный…) этим фактом (а также тем, что не получится уйти с работы пораньше), я решил ознакомиться с аналогичными реализациями в Интернете. Просмотрев несколько примеров, точно также, не воспринимающих какой-либо браузер, а подчас и работающих только в одном определённом, было решено заняться прототипированием, экспериментированием, решением задачи методом тыка (нужное подчеркнуть).
Далее я приведу кроссбраузерный вариант реализации простенького скроллинга страницы вверх/вниз, с пояснениями, где и что может пойти не так и в каком браузере (ни в коем случае не претендую на оригинальность решения, это просто желание поделиться собственным опытом, и сэкономить людям время при решении аналогичных задач). Ах да, забыл оговориться, подавляющая часть кода написана на jQuery.
Подготавливаем основу
HTML код кнопок:
Проблемы начинаются
Теперь начинается самое интересное – JavaScript, а точнее jQuery. Как известно, для организации скроллинга выполняются манипуляции над свойствами scrollTop и scrollLeft. В jQuery эти манипуляции осуществляются при помощи методов .scrollTop() и .scrollLeft() соответственно. Нас интересует только .scrollTop.
Первый, самый простой вариант скроллинга выглядел следующим образом:
Добавим рюшечек и бантиков
Итоговый вариант
Таким образом, рабочий код выглядит следующим образом:
Дополнительно, можно навешать коэффициенты, на которые бы помножалось время или скорость в зависимости от пути для обеспечения больше гибкости, но на этом я уже не буду останавливаться.
Резюме
В итоге мы получили очень простую реализацию скроллинга страницы, которая работает в любом современном браузере.
Испытания проводились для DOCTYPE: XHTML 1.0 Strict в браузерах Chrome 10, Opera 10, Opera 11, Firefox 4, Internet Explorer 8, Internet Explorer 9.
Как вам известно, по нажатию на якорную ссылку нас перекидывает на ту часть страницы с которой эта ссылка связана. Сам переход происходит мгновенно и этот нюанс мы с вами поправим.
Для того чтобы реализовать плавный переход после нажатия по ссылке, нам необходимо будет написать небольшой скрипт, который отследит момент нажатия, выяснит на какой блок ссылается якорь и плавно прокрутит страницу до нужного места. Но давайте обо всем по порядку 🙂
1. Структура меню с якорными ссылками
Чтобы при нажатии по ссылке мы переходили к определенному блоку, абзацу, необходимо в атрибут href прописать имя идентификатора того блока на который мы хотим сослаться, например:
у нас есть блока
, внутренняя ссылка на этот блок будет иметь следующий вид:
Таким образом все ссылки ссылаются на ID блоков.
Вот и сам код меню из демо-примера:
Каждая ссылка ссылается на соответствующий блок:
2. Скрипт плавного перехода к нужному блоку
Итак нам нужно обработать нажатия по ссылкам в нашем меню, отменить стандартное поведение, выяснить на какой блок ссылается якорь и анимировать переход.
Каждую строку скрипта я прокомментировал, если остались вопросы пиши в комментариях к посту – помогу 😉
От автора: кнопка возврата в верхнюю часть страницы позволяет пользователю быстро вернуться в верхнюю часть страницы, не прилагая особых усилий. Это может быть очень полезно, когда на странице много контента или что происходит, например, на одностраничных веб-сайтах, когда используется бесконечная прокрутка, или на мобильных устройствах, где разные размеры экрана могут привести к расширению прокрутки контента.
Эти кнопки обычно размещаются в нижнем углу сайтов, а затем при нажатии возвращают вас в верхнюю часть страницы. Их довольно легко создать с помощью JavaScript. Но визуально мы хотим, чтобы они были ненавязчивыми, однако при этом оставались достаточно большими, чтобы их можно было коснуться или кликнуть. Давайте рассмотрим несколько способов сделать это, начиная с простого, а затем улучшая вещи по ходу.
Читайте также: