Анимация прокрутки до элемента div внутри сайта с параллаксом ⇐ Jquery

[Anonymous]

У меня есть несколько ссылок в верхней части моей страницы с параллаксом, и я хочу, чтобы они анимировали прокрутку до нужного места на странице, когда вы нажимаете на них. В настоящее время ссылки просто переходят на места на моей странице, без анимации.

Параллаксная прокрутка работает, и это первый фрагмент кода в моем .js-файле, который можно просматривается внизу страницы.

вот мой блок ссылок

Код: Выделить всё

 

[url=#home]Your Links[/url] |
[url=#me]More Links[/url] |
[url=#projects]Another Link[/url] |
[url=#hire]Really[/url]

пример того, куда он переходит на странице (но я хочу, чтобы он анимировался)

Код: Выделить всё

section class="box slide slide-1">


Main Title

здесь весь код JavaScript, который я использую на странице

Код: Выделить всё

(function(){

var parallax = document.querySelectorAll(".slide"),
speed = 0.5;

window.onscroll = function(){
[].slice.call(parallax).forEach(function(p,i){

var windowYOffset = window.pageYOffset,
theBackgrounPos = "0 " + (windowYOffset * speed) + "px";

p.style.backgroundPosition = theBackgrounPos;

});
};
})();

/************ CODE USED TO MAKE THE ANIMATION SCROLL TO THAT IS NOT WORKING*////
$(document).ready(function (){
$(".click").click(function (){
$('html, body').animate({
scrollTop: $("#home").offset().top
}, 2000);
});
});

Буду очень признателен за любую помощь, даже если мой лучший маршрут начинается заново.

Подробнее здесь: https://stackoverflow.com/questions/284 ... allax-site