Не работает якорное меню

использую якорное меню на сайте. Использую такой вот код

 $("#site-navigation").on("click","a", function (event) {
        //отменяем стандартную обработку нажатия по ссылке
        event.preventDefault();
        //забираем идентификатор бока с атрибута href
        var id  = $(this).attr('href'),
        //узнаем высоту от начала страницы до блока на который ссылается якорь
            top = $(id).offset().top;
        //анимируем переход на расстояние - top за 1500 мс
        $('body,html').animate({scrollTop: top}, 1500);
    });

На сайте много section и в каждом определенный ID , но проблема в том , что он бывает не достает до него ...скролит до половины или же вообще не к тому. Нажимаю на "портфолио" а скролит до "Блог" или тип этого. Почему так происходит?

Кое как он еще правильно крутит , когда я нажму на li , он крутит до этого раздела , потом нажимаю опять на то же li , он крутит обратно вверх и потом можно нажимать на другое и то не со всеми так работает