Денис Инешин

Можно воспользоваться jQuery:

$(elem).offset().top; // top от документа
$(elem).position().top; // top от родителя

Если хочется именно на JS, то это чуть сложнее:

var top = elem.getBoundingClientRect().top + document.body.scrollTop;

Пример: jsfiddle.net/ewq36gaL

Поставьте z-index не подсказке, а блоку share-block.
Поймите, z-index работает только, когда элементы находятся на одном уровне.

Скорее всего у вас на ссылках стоит тот же самый адрес страницы, или они вообще пустые, вот при клике страница и перезагружается и анимация повторяется.

1. Ссылки не нужны, используйте спаны в пагинации

<form method="get" id="testForm">
  <input type="text" name="name" class="page" />
  <input type="submit" name="search" id="search" value="Поиск"/>
  <input type="hidden" name="current_page" id="current_page" value="{current_page}">
</form>

<span id="pagination">
  <span class="toPage" data-num="1">1</span>
  <span class="toPage" data-num="2">2</span>
  <span class="toPage" data-num="3">3</span>
  <span class="toPage" data-num="4">4</span>
  <span class="toPage" data-num="5">5</span>
  <span class="toPage" data-num="6">6</span>
  <span class="toPage" data-num="7">7</span>
</span>

2. Такой JS:

$(document).on("click", ".toPage", function () {
    var num = $(this).data("num");
    $(".page").prop("value", num);
    $("#testForm").trigger("submit");
});

Ничего, вылижите существующие функции до блеска и запускайтесь. Со временем, если проект попрёт, можно будет добавлять что-то еще.

Есть несколько причин.

1. Уровень абстракции. Поисковики умеют индексировать картинки, по этому, те изображения, которые относятся к оформлению, а не к контенту должны быть вынесены оттуда и размещены в css, там же где и все остальные стили.
2. Возможность динамично менять внешний вид сайта, например реализовывать адаптивность. Это делается легко на CSS с помощью media queries, а вот на стороне HTML уже гораздо сложнее и может потребоваться использовать JavaScript.
3. Меньший вес. CSS сегодня умеет рисовать очень многое, на некоторых проектах экономия на кол-ве картинок и их весе может достигать 90%. Например одни лишь скругленные уголки отрисованные на CSS могут сократить итоговый вес картинки очень существенно. И это делает интерфейс гораздо более отзывчивым особенно на крупных проектах, где важна каждая милисекунда.