Как перейти к элементу с помощью JavaScript

Kak Perejti K Elementu S Pomos U Javascript

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

Это руководство поможет вам перейти к элементу с помощью JavaScript.







Как перейти к элементу с помощью JavaScript?

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



    • прокрутитьВидео() метод
    • прокрутка() метод
    • прокрутить() метод

Упомянутые подходы будут проиллюстрированы один за другим!



Способ 1: прокрутка до элемента в JavaScript с использованием метода scrollIntoView()

прокрутитьВидео() ” прокручивает элемент в видимую область объектной модели документа (DOM). Этот метод можно применять для получения указанного HTML-кода и применения к нему определенного метода с помощью события onclick.





Синтаксис

элемент.scrollIntoView ( выровнять )


В данном синтаксисе « выровнять ” указывает тип выравнивания.



Пример

В следующем примере добавьте следующий заголовок, используя «

' ярлык:

< h2 > Нажмите кнопку, чтобы перейти к элементу. h2 >


Теперь создайте кнопку с « по щелчку » событие, вызывающее функцию « элемент прокрутки() :

< кнопка по щелчку знак равно 'Элемент прокрутки()' > Элемент прокрутки кнопка >
< бр >


После этого укажите источник изображения и его id для прокрутки:

< изображение источник знак равно 'обзор.PNG' я бы знак равно 'див' >


Наконец, определите функцию с именем « элемент прокрутки() », который извлечет требуемый элемент, используя « документ.getElementById() ” и примените к нему метод scrollIntoView() для прокрутки изображения:

функция прокруткаЭлемент ( ) {
элемент var = document.getElementById ( 'див' ) ;
элемент.scrollIntoView ( ) ;
}


CSS-код

В коде CSS примените следующие размеры для настройки размера изображения, ссылаясь на идентификатор изображения « див ”:

#дел{
высота: 800 пикселей;
ширина: 1200 пикселей;
переполнение: авто;
}


Соответствующий вывод будет:

Способ 2: прокрутка до элемента в JavaScript с использованием метода window.scroll()

окно.прокрутка() ” прокручивает окно в соответствии со значениями координат в документе. Этот метод может быть реализован для получения идентификатора изображения, установки его координат с помощью функции и прокрутки указанного изображения.

Синтаксис

окно.прокрутка ( x-координата, y-координата )


В приведенном выше синтаксисе « x-координата ” относится к координатам X, а “ y-координата ” указывает координаты Y.

Следующий пример поясняет заявленную концепцию.

Пример

Повторите те же шаги, чтобы добавить заголовок, создать кнопку, применить событие onclick и указать источник изображения с его идентификатором:

< h2 > Нажмите кнопку, чтобы перейти к элементу. h2 >
< кнопка по щелчку знак равно 'Элемент прокрутки()' > Элемент прокрутки кнопка >
< бр >
< изображение источник знак равно 'изображение.PNG' я бы знак равно 'див' >


Затем определите функцию с именем « элемент прокрутки() ». Здесь мы будем корректировать координаты с помощью « окно.прокрутка() ', обратившись к функции с именем ' Должность() ” и применяя его к полученному элементу изображения:

функция прокруткаЭлемент ( ) {
окно.прокрутка ( 0 , Должность ( документ.getElementById ( 'див' ) ) ) ;
}


После этого определите функцию с именем « Должность() ” принимая переменную obj в качестве аргумента. Также примените « offsetParent », которое будет обращаться к ближайшему предку, не имеющему статической позиции, и возвращать его. Затем увеличьте инициализированное текущее верхнее значение с помощью « смещениеВерх », которое вернет верхнюю позицию по отношению к родителю (offsetParent) и вернет значение « текущий топ », когда добавленное условие оценивается как истинное:

функция Должность ( объект ) {
где текущая вершина = 0 ;
если ( obj.offsetParent ) {
делать {
текущая вершина += obj.offsetTop;
} пока ( ( obj = obj.offsetParent ) ) ;
возвращаться [ токтоп ] ;
}
}


Наконец, стилизуйте созданный контейнер в соответствии с вашими требованиями:

#дел{
высота: 1000 пикселей;
ширина: 1000 пикселей;
переполнение: авто;
}


Выход

Способ 3: прокрутка до элемента в JavaScript с использованием метода scrollTo()

прокрутить() ” прокручивает указанный документ до заданных координат. Аналогичным образом этот метод можно реализовать для получения элемента, используя его идентификатор и выполняя необходимые функции для прокрутки конкретного изображения в DOM.

Синтаксис

окно.scrollTo ( х и у )


Здесь, ' Икс ' а также ' Д ” указывают на координаты x и y.

Взгляните на следующий пример.

Пример

Во-первых, повторите описанные выше шаги для добавления заголовка, кнопки с событием onclick и изображения следующим образом:

< h2 > Нажмите кнопку, чтобы перейти к элементу. h2 >
< кнопка по щелчку знак равно 'Элемент прокрутки()' > Элемент прокрутки кнопка >
< бр >
< изображение источник знак равно 'изображение.JPG' я бы знак равно 'див' >


Затем определите функцию с именем « элемент прокрутки() ” и установите прокрутку, вызвав метод Position() в методе scrollTo():

функция прокруткаЭлемент ( ) {
окно.scrollTo ( 0 , Должность ( документ.getElementById ( 'див' ) ) ) ;
}


Наконец, определите функцию с именем Position() и аналогичным образом примените описанные выше шаги для установки координат указанного изображения:

функция Должность ( объект ) {
где текущая вершина = 0 ;
если ( obj.offsetParent ) {
делать {
текущая вершина += obj.offsetTop;
} пока ( ( obj = obj.offsetParent ) ) ;
возвращаться [ токтоп ] ;
}
}


Выход


Мы обсудили все удобные способы прокрутки к элементу с помощью JavaScript.

Вывод

Чтобы перейти к элементу в JavaScript, используйте « прокрутитьВидео() ' для доступа к элементу и применения указанной функциональности, ' окно.прокрутка() ', чтобы получить элемент, установить его координаты с помощью функции и прокрутить изображение, или использовать метод ' прокрутить() ”, чтобы получить элемент и прокрутить его соответствующим образом. Этот блог продемонстрировал концепцию прокрутки к элементу с помощью JavaScript.