Переход к анкерсу не может найти истинную позицию

Question

Я сделал эффект параллакса на своем сайте. Теперь я хочу реализовать действия для кнопок. Нажатие на кнопку должно переместить экран пользователя на анкер. Но это работает неправильно. Функция определяет offset и использует эти данные, но эффект параллакса меняет этот параметр. Как я могу использовать анкерс и параллакс вместе?

$(document).ready(function() {

$(window).bind('scroll',function(e){
  parallaxScroll();
});

var div1Height = $('.div1').height();
var div2Height = $('.div2').height();
var div3Height = $('.div3').height();

var div2Top = div1Height;
$('.div2').css('top', div2Top);

var div3Top = div2Top + div2Height;
$('.div3').css('top', div3Top);

div1Position = $('.div1').position().top; 
div2Position = $('.div2').position().top;
div3Position = $('.div3').position().top;

// Navigation
$('a.firstImage').click(function(){
  $('html, body').animate({
    scrollTop:0
  }, 1000, function() {
    parallaxScroll();
  });
return false;
});

$('a.secondDiv1').click(function(){
  $('html, body').animate({
    scrollTop:$('.div1').offset().top
  }, 1000, function() {
    parallaxScroll();
  });
return false;
});

$('a.thirdDiv2').click(function(){
  $('html, body').animate({
    scrollTop:$('.div2').offset().top
  }, 1000, function() {
    parallaxScroll();
  });
return false;
});

$('a.fouthDiv3').click(function(){
  $('html, body').animate({
    scrollTop:$('.div3').offset().top
  }, 1000, function() {
    parallaxScroll();
  });
return false;
});
});
	
// Parallax
var div1Position = 0;
var div2Position = 0;
var div3Position = 0;
var scrolledAlbum = 0;
var scrolledFooter = 0;

function parallaxScroll(){
  var scrolled = $(window).scrollTop();

  if ($(document).scrollTop() + $(window).height() < $('.div2').height() + $('.div2').offset().top) {

    if ($(document).scrollTop() + $(window).height() < $('.div1').height() + $('.div1').offset().top) {
      $('.div1').css('top', div1Position - scrolled * 0.95);
      $('.div2').css('top', div2Position - scrolled * 0.95);
      $('.div3').css('top', div3Position - scrolled * 0.95);
      scrolledAlbum = scrolled;
    } else {
      $('.div1').css('top', div1Position - scrolled * 0.95);
      $('.div2').css('top', div2Position -scrolled*1.9 + scrolledAlbum);
      $('.div3').css('top', div3Position -scrolled*1.9 + scrolledAlbum);
      scrolledFooter = scrolled;
    }
  } else {
    $('.div1').css('top', div1Position - scrolled * 0.95);
    $('.div2').css('top', div2Position -scrolled*1.9 + scrolledAlbum);
    $('.div3').css('top', div3Position -scrolled*2.85 + scrolledAlbum + scrolledFooter);
  }          
}

body {
  margin: 0;
  padding: 0;
  background: #000000;
  font-family: 'Roboto', sans-serif;
  letter-spacing: 0.5px;
  color: #ffffff;
  font-size: 20px;
  width: 100%;
}

p {
  color: white;
  font-size: 24px;
}

ol, ul {
  list-style: none;
}

/* Content */

.bodyImage {
  width: 100%;
  height: 100vh;
  background: url(https://images.wallpaperscraft.ru/image/tekstura_treshchiny_chernyj_116899_1600x1200.jpg) no-repeat;
  background-size: 100%;
  display:flex;
  justify-content: center;
  align-items: center;
}

.body {
  position: relative;
  height: 115vh;
  background-attachment: fixed;
}

.div1 {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000000;
  position: absolute;
  top: 0px;
  z-index: 2;
}

.div2 {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: center;
  align-items: center;
  position: absolute;
  z-index: 3;
  background: url(https://images.wallpaperscraft.ru/image/tekstura_treshchiny_chernyj_116899_1600x1200.jpg) no-repeat;
  background-size: 100%;
}

/* Footer */

.div3 {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  z-index: 4;
  background-color: #000000;
}

/* Navigation */

nav#primary {
  z-index: 5;
  position: fixed;
  top: 50%;
  right: 16px;
  margin-top: -40px;
}

nav#primary li {
  position: relative;
  height: 20px;
}

nav#primary a {
  display: block;
  width: 20px;
  height: 20px;
  text-indent: -9999px;
  background: transparent url(http://s1.iconbird.com/ico/0612/vistabasesoftwareicons/w48h481339252451BoxGrey4.png) 4px 4px no-repeat;
}

nav#primary a:hover, nav#primary a.active {
  background: transparent url(http://s1.iconbird.com/ico/0612/vistabasesoftwareicons/w48h481339252451BoxGrey4.png) 4px 4px no-repeat;
}

nav#primary h1 {
  position: absolute;
  right: 22px;
  top: -7px;
  display: none;
  padding: 4px 20px 4px 7px;;
  color: #fff;
  white-space: nowrap;
  background: #000000 100% 50% no-repeat;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>DECAY</title>
	<link type="text/css" rel="stylesheet" href="styles/style.css">
	<link href="https://fonts.googleapis.com/css?family=Kaushan+Script|Roboto&display=swap" rel="stylesheet">
</head>
<body>
  <div class="content">  
  
  <!-- Navigation -->
  <nav id="primary">
    <ul>
      <li>
        <h1>Image</h1>
        <a class="firstImage" href="#bodyImage">View</a>
      </li>
      <li>
        <h1>div1</h1>
        <a class="secondDiv1" href="#div1">View</a>
      </li>
      <li>
        <h1>div2</h1>
        <a class="thirdDiv2" href="#div2">View</a>
      </li>
      <li>
        <h1>div3</h1>
        <a class="fouthDiv3" href="#div3">View</a>
      </li>
    </ul>
  </nav>
  <!-- Content -->
    <div class="bodyImage">
    <p>bodyImage</p>
    </div>
			
  <div class="body">
    <div class="div1"> 
    <p>div1</p>
    </div>

    <div class="div2">
    <p>div2</p>
    </div>
		
    <div class="div3">
    <p>div3</p>
    </div>
    
  </div>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>