Как сделать автоматический горизонтальный скролл до нужного элемента?

Question

[Вадим Контарев]

Вопрос вроде бы простой, но уже неделю ломаю голову над этим:
Есть длинная страница (двустраничный сайт), разбитая на секции. У каждой секции есть свой заголовок, дублирующийся в шапке. При прокрутки до конкретной секции (любая секция) её заголовок в шапке подсвечивается как активный, с этим всё в порядке.
Сложности возникают при переполнении шапки: я сделал горизонтальный скролл, а теперь стоит задача сделать автоматическую прокрутку до выделенного заголовка текущей секции. Я разными способами пытался определить нужную позицию прокрутки, но всё безуспешно...

Сейчас остановился на этом варианте:

Код

max_sp = 0;
if ($("#menu-mobile").width() > 0) {
	$("#menu-mobile").scrollLeft(0);
	var max_sp = $("#menu-mobile .menu-item").last().position().left + $("#menu-mobile .menu-item").last().width();
} else if ($("#menu-tablet").width() > 0) {
	$("#menu-tablet").scrollLeft(0);
	var max_sp = $("#menu-tablet .menu-item").last().position().left + $("#menu-tablet .menu-item").last().width();
} else if ($("#menu-desktop").width() > 0) {
	$("#menu-desktop").scrollLeft(0);
	var max_sp = $("#menu-desktop .menu-item").last().position().left + $("#menu-desktop .menu-item").last().width();
}

scroll_percent = $(window).scrollTop() / $(document).height();
sp = max_sp * scroll_percent;

if (sp < 0) {
	$('.menu-limiter').animate({scrollLeft: "0px"}, 200);
} else {
	$('.menu-limiter').animate({scrollLeft: sp+"px"}, 200);
}

Но у меня остаются артефакты в виде самопроизвольной автоматической прокрутки (возможно связано с выделением, там шрифт становится жирным). Значение
$("#menu-desktop").scrollWidth
Вдруг оказывается неопределённым, поэтому делал такое извращение:

var max_sp = $("#menu-desktop .menu-item").last().position().left + $("#menu-desktop .menu-item").last().width();

Answer 1

[historydev]

Якоря в помощь, записывай в переменную id и вешай обработчик.