Javascript отступ от верха экрана

Как получить расстояние от верха для элемента?

Distance_fromTop будет Расстояние элемента от верхней части окна, тогда вы можете легко прокрутить до этой части окна.

window.scrollTo( 0 , distance_fromTop ); 

Ваш код должен быть таким

let distance_fromTop = document.getElementById("ID_NAME").offsetTop; window.scrollTo( 0 , distance_fromTop ); 

OffsetTop не получает расстояние до верхней части окна. Он попадает в верхнюю часть родительского элемента.

document.querySelector('your-element').getBoundingClientRect().top 

var elDistanceToTop = window.pageYOffset + el.getBoundingClientRect().top 

По моему опыту, document.body.scrollTop не всегда возвращает текущую позицию прокрутки (например, если прокрутка действительно происходит на другом элементе).

В отличие от верхнего ответа, это ДЕЙСТВИТЕЛЬНО работает в iOS Safari. Не тратьте 2 часа на отладку, как я 🙂

OffsetTop смотрит только на родительский элемент. Просто пропустите родительские узлы, пока у вас не закончатся родители, и сложите их смещения.

function getPosition(element) < var xPosition = 0; var yPosition = 0; while(element) < xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft); yPosition += (element.offsetTop - element.scrollTop + element.clientTop); element = element.offsetParent; >return < x: xPosition, y: yPosition >; > 

ОБНОВЛЕНИЕ: у этого ответа есть некоторые проблемы, значения будут иметь крошечные отличия по сравнению с тем, что должно быть, и в некоторых случаях не будут работать правильно.

Чтобы еще больше добавить к этому, эта реализация не работает в Safari так же, как Chrome, поэтому я бы сказал, что ее не следует принимать. Вот демонстрация (прокрутите в обоих браузерах): codepen.io/anon/pen/LaKEPK . Эта реализация stackoverflow.com/a/53351648/775007 работает.

Вы уверены в этом? У меня это работает во всех доступных мне браузерах и ОС. Я думаю, вы могли запутаться, используя модули vh в своем css lol. codepen.io/anon/pen/zXqqbP

window.addEventListener('load', function() < //get the element var elem = document.getElementById('test'); //get the distance scrolled on body (by default can be changed) var distanceScrolled = document.body.scrollTop; //create viewport offset object var elemRect = elem.getBoundingClientRect(); //get the offset from the element to the viewport var elemViewportOffset = elemRect.top; //add them together var totalOffset = distanceScrolled + elemViewportOffset; //log it, (look at the top of this example snippet) document.getElementById('log').innerHTML = totalOffset; >);

document.getElementById("foo").offsetTop 

В моем тестировании это каждый раз давало мне правильный результат. У вас есть случай, когда его нет?

@sachleen, jsfiddle.net/HxDEt/1 показывает, что ваш ответ неверен, если какие-либо элементы контейнера имеют относительное, абсолютное или фиксированное положение (и сами имеют offsetTop).

var distanceTop = element.getBoundingClientRect().top; 

Для получения подробной информации перейдите по ссылке:

Ссылка на решение приветствуется, но убедитесь, что ваш ответ полезен и без нее: добавьте контекст вокруг ссылки, чтобы другие пользователи иметь некоторое представление о том, что это такое и почему он существует, а затем процитировать наиболее релевантную часть страницы, на которую вы ссылаетесь, в случае, если целевая страница недоступна. Ответы, которые представляют собой не более чем ссылку, могут быть удалены.

Это не даст реальной высоты сверху. Он возвращает высоту сверху в текущем прокрученном состоянии окна.

Этот одинарный лайнер, кажется, работает хорошо

document.getElementById("el").getBoundingClientRect().top + window.scrollY 

Хотя это довольно старое обсуждение, но оно довольно хорошо работает в браузерах chrome / firefox / safari :

window.addEventListener('scroll', function() < var someDiv = document.getElementById('someDiv'); var distanceToTop = someDiv.getBoundingClientRect().top; >); 

Прокрутите до верхней позиции элемента;

var rect = element.getBoundingClientRect(); var offsetTop = window.pageYOffset + rect.top - rect.height; 

warning warning warning warning warning warning

«Классический случай» — URL «/ # about-us» и div с идентификатором «about -us «. В этом случае верхняя позиция задается поведением при нажатии привязки по умолчанию (таким образом, верхняя позиция — 0 для about-us div). Вы должны предотвратить дефолт (иначе вы сойдете с ума от того, почему он не работает, или от любого другого кода, который вы там найдете). Более подробная информация ниже в разделе «Предупреждение».

Решение менее чем за 30 секунд (две строки кода «привет, мир»):

Получить свой элемент:

var element = document.getElementById("hello"); 

Получить getBoundingClientRect ();

Метод Element.getBoundingClientRect () возвращает размер элемент и его положение относительно области просмотра. https://developer.mozilla.org/en-US/ docs / Web / API / Element / getBoundingClientRect

var rect = element.getBoundingClientRect(); 

Возвращаемый объект:

Точечная запись top

var distance_from_top = rect.top; /* 1007.9971313476562 */ 

StackOverflow nightmare 2 — установите для позиции прокрутки это значение

Снова «привет, мир» (8000 ответов — 7999 не работают или усложняются).

При желании добавьте значение смещения к top (для закрепленных панелей навигации).

Фрагмент кода «Hello World» (получить расстояние от верхнего окна просмотра + щелкнуть до scrollTo )

var element = document.getElementById("hello"); var rect = element.getBoundingClientRect(); var distance_from_top = rect.top; /* 50px */ console.log(distance_from_top); function scrollTovView()< window.scrollTo(< top: distance_from_top, behavior: 'smooth' >); >

scrollTo to red DIV 
50px height
 

warning

ScrollTo «конфликтует» с основными якорными панелями навигации

Этот трюк очень ошибочен , если, например, вы используете этот URL-адрес (идентификатор для привязки URL-адреса) (верхний — 0 или «сойти с ума» хх).

Чтобы этот код работал, вы должны добавить:

Источник

HTML DOM Element offsetTop

All block-level elements report offsets relative to the offset parent:

The offset parent is the nearest ancestor that has a position other than static.

If no offset parent exists, the offset is relative to the document body.

See Also:

Syntax

Return the top offset position:

Return Value

More Examples

Create a sticky navigation bar:

// Get the navbar
const navbar = document.getElementById(«navbar»);

// Get the offset position of the navbar
const sticky = navbar.offsetTop;

// Add the sticky class to the navbar when you reach its scroll position. Remove the sticky class when you leave the scroll position.
function myFunction() if (window.pageYOffset >= sticky) navbar.classList.add(«sticky»)
> else navbar.classList.remove(«sticky»);
>
>

Browser Support

element.offsetTop is supported in all browsers:

Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	Yes

Источник

Отступ от верхнего края страницы через JavaScript

Почему образуется отступ блока от верхнего края окна браузера?
Доброго времени суток! В коде ниже образуется отступ о верхнего края браузера. То есть <body>.

Отступ от края окна браузера
Вообщем проблема такова.Дан текст и его вид уже непосредственно в форме html страницы(скриншот.

Убрать отступ от края экрана
Как убрать отступ от края DIV в ASP.NET На рисунке 1, то что получается а вариант 2 — так как.

Текст не позиционируется относительно верхнего края блока
Такой момент, у меня текст не позиционируется относительно верхнего края блока div. Т.е. я.

a4t_ech, откуда переменная clientWindowHeight ?

Добавлено через 1 минуту
кажется понял
вы её замените на window.innerHeight

Сообщение от BANO

a4t_ech, конечно не работает
вы сказали число, а что это число обозначает?
это нам понятно, что пиксели, а dom насрать что нам понятно, у него велечин до чёрта

function sizeImg() { document.getElementById("penguins").style.height = ((clientWindowHeight - 100) * 0.9)+"px"; }

Сообщение от BANO

a4t_ech, консоль покажите

Добавлено через 2 минуты
блин, я понял

вы не заменили clientWindowHeight на window.innerHeight

Добавлено через 1 минуту
а во-вторых, как вы собираетесь высотой смещать картинку вниз?

function sizeImg() { document.getElementById("penguins").style.height = ((window.outerHeight - 100) * 0.9)+"px"; }

так отступ появился, но снизу

Добавлено через 1 час 27 минут
полностью переписал, получился результат как хотел, но код не такой как хотел( кто знает как получить такой же результат, но с помощью первого варианта кода?

function sizeImg() { //document.getElementById("penguins").style.height = ((window.outerHeight - 100) * 0.9)+"px"; - это первый вариант кода document.getElementById("penguins").style.marginTop = "100px"; // это второй вариант кода document.getElementById("penguins").style.height = "655px"; // это второй вариант кода }

Источник