Как заставить работать плавный скролл с ссылками+якорь?

Question

[seregindev]

Доброго времени суток, столкнулся с такой проблемой, всё не могу найти решение.

В чём проблема.
У меня имеются ссылки(якори), кликаем -> плавно едем к блоку(данный способ работает, только с теми элементами, которые не имеют ссылки страницы)
Моя ситуация требует такого подхода, якорь выглядит следующим образом(ссылка/#якорь)
При клике мы просто перемещаемся, анимация не срабатывает.

jQuery(function($) { 
 
$('a[href^="#"]').live('click',function(event){
    event.preventDefault();
    var target_offset = $(this.hash).offset() ? $(this.hash).offset().top : 0;
    //change this number to create the additional off set        
    var customoffset = 85;
    $('html, body').animate({scrollTop:target_offset - customoffset}, 500);
});
 
}(jQuery));

Answer 1

[Алексей Ярков]

якорь выглядит следующим образом(ссылка/#якорь)

$('a[href^="#"]').live('click',function(event){

Символ ^ о чем вам говорит?

Comments

[Денис Белевцов]

Ок. Как выглядит ссылка в HTML?

[Алексей Ярков]

denistrator: селектор $('a[href^="#"]') не выберет ссылки с таким href: <a href="page/#hash"></a> А селектор $('a[href*="#"]') выберет ))

[Денис Белевцов]

Алексей Ярков: Можно анимировать переход к элементу на странице. Как вы собираетесь анимировать переход на другую страницу? Ведь ссылка вида "page/#hash" ведёт на другую страницу

[Алексей Ярков]

Денис Белевцов:

Ведь ссылка вида "page/#hash" ведёт на другую страницу

От это новость ))))) Я в курсе, а в ответе указал на ошибочный селектор. А как там автор будет ловить событие смены URL - я хз. Способов несколько, так что выбор за ним.

Answer 2

[Денис Белевцов]

якорь выглядит следующим образом(ссылка/#якорь)

Насколько я понимаю ссылка ведёт на другую страницу. Как вы это хотите анимировать?
Если это элемент на текущей станице, то классика должна сработать,

$('a[href ^= "#"]').click(function () {
		var elementClick = $(this).attr("href");
		var destination = $(elementClick).offset().top;
		$('html,body').animate( { scrollTop: destination }, 1000 );
		return false;
	});