Прошу помощи в работе с якорями?

Question

[Сергей Ноздрин]

Здравствуйте!


Разрабатываю я один сайт и в меню данного сайта использую якоря, так как большая часть контента находится на главной странице, просто в разных местах.


Воспроизводим проблему:

1) Зайдите на демку vamsms.ru (не бойтесь, про смски там ничего нет, просто был свободный адрес для теста)

2) Нажмите на статьи в меню. Адрес будет вида mysite.ru/stati.php

3) Теперь нажмите на раздел О центре. Так как эта инфа на главной странице, то он перебросит нас туда, к якорю #about. При этом адрес будет вида mysite.ru/index.html#about

Пока все хорошо


4) Теперь ошибка! Если нажать на раздел Контакты (тоже находятся на главной, привязаны к якорю #contacts), то мы перенесемся к контактам, но адрес так и будет иметь вид mysite.ru/index.html#about, хотя должен бы mysite.ru/index.html#contacts


Вот это и есть та проблема, которая не дает мне покоя. Есть ли мысли, как ее решить?

Answer 1

[Makito]

Дело в том, что у вас там используется плавная промотка скриптом к нужному якорю, и скорее всего в функции возвращается return false, что запрещает ссылке установить новый адрес.

Comments

[Сергей Ноздрин]

Да, вот текст этого js:

function anchorScroller(el, duration) {
if (this.criticalSection) {
return false;
}
if ((typeof el != 'object') || (typeof el.href != 'string'))
return true;
var address = el.href.split('#');
if (address.length < 2)
return true;
address = address[address.length-1];
el = 0;
for (var i=0; i<document.anchors.length; i++) {
if (document.anchors[i].name == address) {
el = document.anchors[i];
break;
}
}
if (el === 0)
return true;
this.stopX = 0;
this.stopY = 0;
do {
this.stopX += el.offsetLeft;
this.stopY += el.offsetTop;
} while (el = el.offsetParent);
this.startX = document.documentElement.scrollLeft || window.pageXOffset || document.body.scrollLeft;
this.startY = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
this. stopX = this.stopX - this.startX;
this.stopY = this.stopY - this.startY;
if ( (this.stopX == 0) && (this.stopY == 0) )
return false;
this.criticalSection = true;
if (typeof duration == 'undefined')
this.duration = 500;
else
this.duration = duration;
var date = new Date();
this.start = date.getTime();
this.timer = setInterval(function () {
var date = new Date();
var X = (date.getTime() - this.start) / this.duration;
if (X > 1)
X = 1;
var Y = ((-Math.cos(X*Math.PI)/2) + 0.5);
cX = Math.round(this.startX + this.stopX*Y);
cY = Math.round(this.startY + this.stopY*Y);
document.documentElement.scrollLeft = cX;
document.documentElement.scrollTop = cY;
document.body.scrollLeft = cX;
document.body.scrollTop = cY;
if (X == 1) {
clearInterval( this.timer);
this.criticalSection = false;
}
}, 10);
return false;
}

[Makito]

Ну вот в конце и видим — return false. Если по быстрому то уберите со ссылки «Контакты» обработчик onclick, если же хочется оставить анимацию то нужно будет скрипт слегка допилить.

[Сергей Ноздрин]

Премного благодарен)

Answer 2

[Юрий Попов]

После строки

clearInterval( this.timer);

вставьте такую строчку:

location.hash = address;

Comments

[Сергей Ноздрин]

Все работает.