Пример как пристроить прокрутку скролла окна браузера до определенного якоря, слой например - это не важно.
Нужно скролировать по отношению к прокрученной уже области экрана, т.е. чтобы пользователя переносить к позиции, отщитанной не от "начала" сайта, а от начала окна браузера:
<html><head>
<title></title>
<script language=JavaScript><!--
//Объявляем обработку события onScroll.
//Можно конечно сделать в теге body (<body onScroll="doc_scroll()">)
//Но если здесь то имя события в нижнем регистре, имя функции без скобок!
window.onscroll = doc_scroll;
//Данные переменные хранят положение скролинга
var scrollTop = 0;
var scrollLeft = 0;
function doc_scroll() {
scrollTop = document.body.scrollTop;
scrollLeft = document.body.scrollLeft;
}
//функции которые ты можешь вызывать где угодно, имена функций можно изменить
//в параметре передается смещение скролла в пикселах.
function scroll_up(pNum) { //смещает вверх
scrollTop = ((scrollTop - pNum) > 0 ? scrollTop - pNum : 0);
scroll(scrollLeft, scrollTop);
}
function scroll_down(pNum) { //смещает вниз
var st = scrollTop + pNum;
var sh = document.body.scrollHeight;
var ch = document.body.clientHeight;
scrollTop = ((st + ch) < sh ? st : sh - ch);
scroll(scrollLeft, scrollTop);
}
function scroll_left(pNum) { //смещает влево
scrollLeft = ((scrollLeft - pNum) > 0 ? scrollLeft - pNum : 0);
scroll(scrollLeft, scrollTop);
}
function scroll_right(pNum) { //смещает вправо
var sl = scrollLeft + pNum;
var sw = document.body.scrollWidth;
var cw = document.body.clientWidth;
scrollLeft = ((sl + cw) < sw ? sl : sw - cw);
scroll(scrollLeft, scrollTop);
}
//--></script>
</head><body>
<a href="javascript:scroll_down(250)">+250</a>
<a href="javascript:scroll_down(500)">+500</a>
<a href="javascript:scroll_down(800)">+800</a><br>
1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
<a href="javascript:scroll_up(200)">-200</a>
<a href="javascript:scroll_up(450)">-450</a>
<a href="javascript:scroll_up(700)">-700</a>
</body></html>