Есть код, где переход по ссылке ведет к якорю ajax-представления. Код, динамически меняющегося контента, скрипта ajax работает. По якорю переходит, но быстро, нужно сделать, чтоб был плавный скроллинг. Код страницы:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<li class="loadBtn" value="1"><a href="#top">1</a></li>
<li class="loadBtn" value="2"><a href="#top">2</a></li>
<li class="loadBtn" value="3"><a href="#top">3</a></li>
<li class="loadBtn" value="4"><a href="#top">4</a></li>
<div id="content"><a name="top" href="#"></a></div> //якорь
<!-- Скрипт предложенный And Rey и который я ранее пробовал использовать --Ю
<script>
$(document).ready(function(){
$("#menu").on("click","a", function (event) {
//отменяем стандартную обработку нажатия по ссылке
event.preventDefault();
//забираем идентификатор бока с атрибута href
var id = $(this).attr('href'),
//узнаем высоту от начала страницы до блока на который ссылается якорь
top = $(id).offset().top;
//анимируем переход на расстояние - top за 1500 мс
$('body,html').animate({scrollTop: top}, 3500);
});
});
</script>
<!--Скрипт для динамической смены контента -->
<script>
$(document).ready(function(){
var tpls = ['1.php', '2.php','3.php','4.php',];
$('.loadBtn').click(function(){
loadContent($(this).index());
});
loadContent(0);
function loadContent(index) {
if (!tpls[index]) return;
$.ajax({
url: tpls[index],
cache: false,
success: function(html){
$("#content").html(html);
}
});
}
});
</script>
</body>
</html>