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

Question

[lagudal]

Необходимо сделать несколько "костыльное" решение проблемы.
Страница, на которой имеются 3 таба. Если кликнуть на средний, а затем на любой из крайних, происходит "скачок" наверх страницы. Искать причину замучился, нашел некоторое костыльное промежуточное решение.
Если посмотреть внимательно, то можно увидеть, что только после клика по среднему табу при последующем клике на крайние табы те получают координату на экране getBoundingClientRect().top равной 0.
Увидеть это можно например в консоли -

function message() {
  var top = this.getBoundingClientRect().top;
  alert('top: ' + top + ' ');
  }
  [].forEach.call(document.querySelectorAll('#tab-label-description, #tab-label-additional, #tab-label-productattach'), function(el)  { 
  el.addEventListener('click', message)})

Не придумал ничего пока лучше, чем принудительно установить жестко в пикселях

function message() {
  var top = this.getBoundingClientRect().top;
  if (top == 0) {
   window.scrollTo({ top: 400});
  }
  }
  [].forEach.call(document.querySelectorAll('#tab-label-description, #tab-label-additional, #tab-label-productattach'), function(el)  { 
  el.addEventListener('click', message)})

Но как бы не очень, так как если внизу или вверху страницы будет таб то будет прыгать, не так критично, но все же..
Может как то проще и красивее можно обработать?

Answer 1

[venanen]

При клике на средний таб, страница скроллится до #additional. Вероятнее всего, ссылается на него через вертикальную координату на экране, и scrollTo.
В качестве решения, в первый и третий табы свои id, и ссылайся на них.

Comments

[lagudal]

я это вижу, попробую объяснить понятнее, в чем тут проблема.
Если я скажем за координату по вертикали беру координату любого из крайних табов, то у меня есть 2 возможности - сделать эту координату независимой от скроллинга, или постоянно отслеживать скроллинг и в нужный момент - при клике - использовать текущую координату.
Первый вариант -

var tab = document.getElementById('tab-label-description');
var position = tab.getBoundingClientRect();
var topPosition = position.top;

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

var tabs = document.querySelectorAll('#tab-label-description, #tab-label-additional, #tab-label-productattach');
  function noScroll() {
  var tab = document.getElementById('tab-label-description');
  var position = tab.getBoundingClientRect();
  var topPosition = position.top;
  //alert('top: ' + topPosition + ' ');
   window.scrollTo({ top: topPosition});
  }

все то же, но уже в функции - то на первый взгляд кажется, что это именно то что надо. Однако, вся проблема в том, что после клика на средний таб координаты всех табов устанавливаются в 0. Т.е., после клика на средний таб скролла еще не происходит, но значение вертикальной коодринаты для всех табов уже установлено в 0, и при любом следующем клике по любому из табов происходит скролл наверх.

Первое, что подумалось, что надо отслеживать координату не крайних, а среднего таба - поскольку после клика по крайним табам значение координаты в 0 не устанавливается. Но и тут, дефолтная обработка клика по среднему табу и его координату ставит в 0, поэтому тоже не получается...
Пока единственное, что приходит в голову, либо хранить в переменной текущее, и еще в одной переменной - предыдущее значение координаты, и делать постоянную проверку, не равно ли текущее значение нулю. Если равно, то установить предыдущее.
Ну либо оставить как есть - жестко какое то фиксированное значение, которое гарантирует нахождение табов в фокусе, ну иногда небольшие скроллы...