ScrollSpyとsmooth-scrollの組合せで挙動がおかしい

前提・実現したいこと

スクロールスパイにsmooth-scroll.js を組合せました。
スクロール自体は動くのですが、ナビの active の位置がずれます。
正しい動きにするにはどうしたら良いのでしょうか？

マウスでスクロールしている時は、
特に変わった様子はありません。

発生している問題・エラーメッセージ

ABOUTをクリックしたのにBLOGがフォーカスされている。
画面上からhtmlを確認すると、選択した２個上に class="active" が記載されていました。
URLは、index.html#about となっています。

該当のソースコード

html
1<html lang="ja">
2	<head>
3		<!-- 必要なメタタグ -->
4		<meta charset="utf-8">
5		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6		<meta http-equiv="X-UA-Compatible" content="IE=edge">
7		
8		<title>LP 2-column</title>
9		
10		<!-- Bootstrap CSS -->
11		<link href="css/bootstrap.min.css" rel="stylesheet">
12		<!-- fontawesome CSS -->
13		<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
14		
15		<link href="css/style.css" rel="stylesheet">
16	</head>
17
18	<body role="document" data-spy="scroll" data-target="#side-navber" data-offset="0">
19		<div class="container-fluid">
20			<div class="row">
21				<nav class="col-md-3 col-lg-2 d-none d-md-block sidebar" data-scroll-header>
22					<h1 class="logo">SAMPLE</h1>
23					<div id="side-navber" class="sidebar-sticky">
24						<ul class="nav flex-column">
25							<li class="nav-item">
26								<a class="nav-link" href="#main" data-scroll>
27									HOME
28								</a>
29							</li>
30							<li class="nav-item">
31								<a href="#blog" class="nav-link" data-scroll>
32									BLOG
33								</a>
34							</li>
35							<li class="nav-item">
36								<a href="#portfolio" class="nav-link" data-scroll>
37									PORTFOLIO
38								</a>
39							</li>
40							<li class="nav-item">
41								<a href="#about" class="nav-link" data-scroll>
42									ABOUT
43								</a>
44							</li>
45							<li class="nav-item">
46								<a href="#contact" class="nav-link" data-scroll>
47									CONTACT
48								</a>
49							</li>
50						</ul>
51					</div>
52				</nav>
53
54				<div class="col-md-9 col-lg-10 ml-sm-auto p-0">
55					<div id="main"></div>
56										
57					<div id="blog" class="p-5"></div>
58					
59					<div id="portfolio" class="p-5"></div>
60					
61					<div id="about" class="p-5"></div>
62					
63					<div id="contact" class="p-5"></div>					
64				</div>
65			</div><!-- /.row -->
66		</div><!-- /.container-fluid -->
67		
68		
69		<!-- オプションのJavaScript -->
70		<!-- 最初にjQuery、次にPopper.js、次にBootstrap JS -->
71		<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
72		<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
73		<script src="js/bootstrap.min.js"></script>	
74		
75		<!-- smooth-scroll js -->
76		<script src="js/smooth-scroll.min.js"></script>
77		<script>
78			$(document).ready(function () {
79				var scroll = new SmoothScroll('[data-scroll]', {
80					header: '[data-scroll-header]',
81					speed: 500,
82					easing: 'easeOutQuad',
83					offset: 0,
84				});
85			});
86		</script>
87		
88		<script src="js/main.js"></script>
89	</body>
90</html>

main.jsは、下記のとおりです。

js
1;(function () {
2	'use strict';
3
4	var isMobile = {
5		Android: function() {
6			return navigator.userAgent.match(/Android/i);
7		},
8			BlackBerry: function() {
9			return navigator.userAgent.match(/BlackBerry/i);
10		},
11			iOS: function() {
12			return navigator.userAgent.match(/iPhone|iPad|iPod/i);
13		},
14			Opera: function() {
15			return navigator.userAgent.match(/Opera Mini/i);
16		},
17			Windows: function() {
18			return navigator.userAgent.match(/IEMobile/i);
19		},
20			any: function() {
21			return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
22		}
23	};
24
25	var fullHeight = function() {
26
27		if ( !isMobile.any() ) {
28			$('.js-fullheight').css('height', $(window).height());
29			$(window).resize(function(){
30				$('.js-fullheight').css('height', $(window).height());
31			});
32		}
33
34	};
35
36	// Animations
37	var contentWayPoint = function() {
38		var i = 0;
39		$('.animate-box').waypoint( function( direction ) {
40
41			if( direction === 'down' && !$(this.element).hasClass('animated') ) {
42				
43				i++;
44
45				$(this.element).addClass('item-animate');
46				setTimeout(function(){
47
48					$('body .animate-box.item-animate').each(function(k){
49						var el = $(this);
50						setTimeout( function () {
51							var effect = el.data('animate-effect');
52							if ( effect === 'fadeIn') {
53								el.addClass('fadeIn animated');
54							} else if ( effect === 'fadeInLeft') {
55								el.addClass('fadeInLeft animated');
56							} else if ( effect === 'fadeInRight') {
57								el.addClass('fadeInRight animated');
58							} else {
59								el.addClass('fadeInUp animated');
60							}
61
62							el.removeClass('item-animate');
63						},  k * 200, 'easeInOutExpo' );
64					});
65					
66				}, 100);
67				
68			}
69
70		} , { offset: '85%' } );
71	};
72	
73	
74	// Document on load.
75	$(function(){
76		fullHeight();
77		contentWayPoint();
78	});
79}());

css
1/*====================================
2 
3	1. Sidebar
4 
5====================================*/
6.sidebar {
7	position: fixed;
8	top: 0;
9	bottom: 0;
10	left: 0;
11	z-index: 100; /* ナビゲーションバーの背面 */
12	box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
13	text-align: center;
14}
15.logo {
16	font-weight: 700;
17	margin-bottom: 2em;
18	text-transform: uppercase;
19	font-size: 32px;
20}
21
22.sidebar-sticky {
23	position: relative;
24	top: 0;
25	height: calc(100vh - 48px);
26	overflow: hidden;
27}
28.nav-item {
29	margin-bottom: 10px;
30	list-style: none;
31}
32
33.nav-link {
34	color: #3C474E;
35	display: inline-block;
36	font-size: 13px;
37	font-weight: 600;
38	letter-spacing: .2em;
39	position: relative;
40	padding: 10px 10px;
41}
42.nav-link::after {
43	content: "";
44	position: absolute;
45	height: 2px;
46	bottom: 7px;
47	left: 10px;
48	right: 12px;
49	background-color: #885988;
50	visibility: hidden;
51	
52	-webkit-transform: scaleX(0);
53	   -moz-transform: scaleX(0);
54		-ms-transform: scaleX(0);
55		 -o-transform: scaleX(0);
56			transform: scaleX(0);
57	
58	-webkit-transition: all .3s cubic-bezier(.175, .885, .32, 1.275);
59	   -moz-transition: all .3s cubic-bezier(.175, .885, .32, 1.275);
60		-ms-transition: all .3s cubic-bezier(.175, .885, .32, 1.275);
61		 -o-transition: all .3s cubic-bezier(.175, .885, .32, 1.275);
62			transition: all .3s cubic-bezier(.175, .885, .32, 1.275);
63}
64.nav-link:hover {
65	color: #000;
66}
67.nav-link.active::after,
68.nav-link:hover::after {
69	visibility: visible;
70
71	-webkit-transform: scaleX(1);
72	   -moz-transform: scaleX(1);
73		-ms-transform: scaleX(1);
74		 -o-transform: scaleX(1);
75			transform: scaleX(1);
76}
77
78.footer {
79	position: absolute;
80	bottom: 130px;
81	font-size: 14px;
82	text-align: center;
83	width: 100%;
84	font-weight: 400;
85	color: rgba(0, 0, 0, 0.6);
86	padding: 0 10px;
87}
88
89.sns-icon li a {
90	color: rgba(0, 0, 0, 0.6);
91}
92