При просмотре веб-страниц прокрутка до элемента удерживает внимание пользователя, привлекая его внимание в течение длительного периода времени. Эта функция может применяться, когда пользователю необходимо прокрутить страницу одним щелчком мыши или, в случае автоматизированного тестирования, мгновенно проверить добавленный контент в нижней части страницы. В таких сценариях прокрутка к элементу в JavaScript добавляет функциональность, которую можно применить одним щелчком мыши без особого взаимодействия с пользователем, и экономит время.
Это руководство поможет вам перейти к элементу с помощью JavaScript.
Как перейти к элементу с помощью JavaScript?
Чтобы перейти к элементу с помощью JavaScript, вы можете использовать:
-
- “ прокрутитьВидео() метод
- “ прокрутка() метод
- “ прокрутить() метод
Упомянутые подходы будут проиллюстрированы один за другим!
Способ 1: прокрутка до элемента в JavaScript с использованием метода scrollIntoView()
“ прокрутитьВидео() ” прокручивает элемент в видимую область объектной модели документа (DOM). Этот метод можно применять для получения указанного HTML-кода и применения к нему определенного метода с помощью события onclick.
Синтаксис
элемент.scrollIntoView ( выровнять )
В данном синтаксисе « выровнять ” указывает тип выравнивания.
Пример
В следующем примере добавьте следующий заголовок, используя « ' ярлык:
< h2 > Нажмите кнопку, чтобы перейти к элементу. h2 >
Теперь создайте кнопку с « по щелчку » событие, вызывающее функцию « элемент прокрутки() :
< бр >
После этого укажите источник изображения и его id для прокрутки:
Наконец, определите функцию с именем « элемент прокрутки() », который извлечет требуемый элемент, используя « документ.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.