<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>ГГ</title>
<style>
button {
width: 100px;
height: 200px;
}
#searchItem {
width: 100px;
height: 100px;
margin-left:100px;
margin-top:100px;
border: 1px solid red;
}
.lastItem {
margin-top: 500px;
margin-left: 500px;
}
</style>
</head>
<body>
<button>Жми</button>
<div id="searchItem">Искомый элемент</div>
<div class="lastItem">lastitem</div>
<script>
var place = {}, center = {};
function getCoords(elem) {
/*функция возвращает координаты левого верхнего угла DOM-элемента*/
var box = elem.getBoundingClientRect();
var body = document.body;
var docEl = document.documentElement;
var scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop;
var scrollLeft = window.pageXOffset || docEl.scrollLeft || body.scrollLeft;
var clientTop = docEl.clientTop || body.clientTop || 0;
var clientLeft = docEl.clientLeft || body.clientLeft || 0;
var top = box.top + scrollTop - clientTop;
var left = box.left + scrollLeft - clientLeft;
return {
top: top,
left: left
};
}
function f(){
//находим нужный элемент
var searchItem = document.querySelector('#searchItem');
//получаем все его стилевые свойства
var computedStyle = getComputedStyle(searchItem);
//прокручиваем страницу к искомому элементу
window.scrollTo(getCoords(searchItem)['left'], getCoords(searchItem)['top']);
//записываем местоположение искомого элемента
place.x = getCoords(searchItem)['left'];
place.y = getCoords(searchItem)['top'];
//вычисляем и записываем координаты центра искомого элемента
center.x = getCoords(searchItem)['left'] + (parseInt(computedStyle.width)/2) + 'px';
center.y = getCoords(searchItem)['top'] + (parseInt(computedStyle.height)/2) + 'px';
//выводим координаты центра искомого элемента
alert('Координата x центра искомого элемента: '+center.x);
alert('Координата y центра искомого элемента: '+center.y);
alert('Координата x левого верхнего угла искомого элемента: '+place.x);
alert('Координата y левого верхнего угла искомого элемента: '+place.y);
}
document.querySelector('button').addEventListener('click', f, false);
</script>
</body>
</html>