Докато сърфирате в уеб страниците, превъртането до даден елемент държи потребителя фокусиран, като привлича вниманието му за дълъг период от време. Тази функционалност може да се приложи, когато потребителят трябва да превърта само с едно щракване или, в случай на автоматизирано тестване, незабавно да провери добавеното съдържание в долната част на страницата. В такива сценарии превъртането до елемент в JavaScript добавя функционалност, която да бъде приложена с едно щракване без много потребителско взаимодействие и спестява време.
Това ръководство ще ви насочи да превъртите до елемент с помощта на JavaScript.
Как да превъртите до елемент с помощта на JavaScript?
За да превъртите до елемент с помощта на JavaScript, можете да използвате:
-
- “ scrollIntoView() ” метод
- “ превъртане () ” метод
- “ scrollTo() ” метод
Споменатите подходи ще бъдат илюстрирани един по един!
Метод 1: Превъртете до елемент в JavaScript с помощта на метода scrollIntoView().
„ scrollIntoView() ” превърта елемент във видимата област на обектния модел на документа (DOM). Този метод може да се приложи, за да получите посочения HTML и да приложите конкретния метод към него с помощта на събитието onclick.
Синтаксис
element.scrollIntoView ( подравнете )
В дадения синтаксис „ подравнете ” показва типа подравняване.
Пример
В следващия пример добавете следното заглавие, като използвате „ ” етикет:
< h2 > Щракнете върху бутона, за да превъртите до елемента. h2 >
Сега създайте бутон с „ onclick ' събитие, извикващо функцията ' scrollElement() :
< бр >
След това посочете източника на изображението и неговия идентификатор, за да се превърта:
И накрая, дефинирайте функция с име „ scrollElement() ”, който ще извлече необходимия елемент с помощта на „ document.getElementById() ” и приложете метода scrollIntoView() върху него, за да превъртите изображението:
var element = document.getElementById ( 'div' ) ;
element.scrollIntoView ( ) ;
}
CSS код
В CSS кода приложете следните размери за коригиране на размера на изображението, като се позовавате на идентификатора на изображението „ див ”:
#div{височина: 800px;
ширина: 1200px;
преливане: авто;
}
Съответният изход ще бъде:
Метод 2: Превъртете до елемент в JavaScript, като използвате метода window.scroll().
„ window.scroll() ” превърта прозореца според стойностите на координатите в документа. Този метод може да се приложи за извличане на идентификатора на изображението, задаване на координатите му с помощта на функция и превъртане на определеното изображение.
Синтаксис
прозорец.превъртане ( x-коорд, y-коорд )
В горния синтаксис „ x-коорд ” се отнася за координатите X, а „ y-коорд ” показва Y координатите.
Следващият пример обяснява посочената концепция.
Пример
Повторете същите стъпки, за да добавите заглавието, да създадете бутон, да приложите събитието onclick и да посочите източника на изображение с неговия идентификатор:
< h2 > Щракнете върху бутона, за да превъртите до елемента. h2 >< бутон onclick = 'scrollElement()' > Елемент на превъртане бутон >
< бр >
< образ src = 'изображение.PNG' документ за самоличност = 'div' >
След това дефинирайте функция с име „ scrollElement() ”. Тук ще коригираме координатите с помощта на „ window.scroll() ” чрез достъп до функцията с име „ Позиция() ” и прилагането му върху извлечения елемент на изображението:
прозорец.превъртане ( 0 , Позиция ( document.getElementById ( 'div' ) ) ) ;
}
След това дефинирайте функция с име „ Позиция() ” вземайки променлива obj като аргумент. Също така приложете „ offsetParent ”, което ще има достъп до най-близкия предшественик, който няма статична позиция, и ще го върне. След това увеличете инициализираната текуща горна стойност с помощта на „ offsetTop ”, което ще върне най-горната позиция по отношение на родителя (offsetParent) и ще върне стойността на „ текущ връх ”, когато добавеното условие се оценява като вярно:
където currenttop = 0 ;
ако ( obj.offsetParent ) {
направи {
currenttop += obj.offsetTop;
} докато ( ( obj = obj.offsetParent ) ) ;
връщане [ currenttop ] ;
}
}
И накрая, стилизирайте създадения контейнер според вашите изисквания:
височина: 1000px;
ширина: 1000px;
преливане: авто;
}
Изход
Метод 3: Превъртете до елемент в JavaScript с помощта на метода scrollTo().
„ scrollTo() ” методът превърта посочения документ до присвоените координати. Този метод може да бъде приложен по подобен начин, за да получите елемента, като използвате неговия идентификатор и изпълните необходимата функционалност за превъртане на конкретното изображение в DOM.
Синтаксис
window.scrollTo ( x и y )
Тук, ' х ' и ' Y ” сочат към координатите x и y.
Разгледайте следния пример.
Пример
Първо повторете обсъдените по-горе стъпки за добавяне на заглавие, бутон със събитие onclick и изображение, както следва:
< h2 > Щракнете върху бутона, за да превъртите до елемента. h2 >< бутон onclick = 'scrollElement()' > Елемент на превъртане бутон >
< бр >
< img src = 'изображение.JPG' документ за самоличност = 'div' >
След това дефинирайте функция с име „ scrollElement() ” и задайте превъртането, като извикате метода Position() в метода scrollTo():
window.scrollTo ( 0 , Позиция ( document.getElementById ( 'div' ) ) ) ;
}
Последно, дефинирайте функция с име Position() и по подобен начин приложете описаните по-горе стъпки за задаване на координатите на посоченото изображение:
където currenttop = 0 ;
ако ( obj.offsetParent ) {
направи {
currenttop += obj.offsetTop;
} докато ( ( obj = obj.offsetParent ) ) ;
връщане [ currenttop ] ;
}
}
Изход
Обсъдихме всички удобни методи за превъртане до елемент с помощта на JavaScript.
Заключение
За да превъртите до елемент в JavaScript, използвайте „ scrollIntoView() ” за достъп до елемента и прилагане на определената функционалност, „ window.scroll() ' за извличане на елемента, задаване на координатите му с помощта на функция и превъртане на изображението или използване на ' scrollTo() ”, за да извлечете елемента и да го превъртите съответно. Този блог демонстрира концепцията за превъртане до елемент с помощта на JavaScript.