jQueryでoverflow内をスムーススクロールさせる

Question

jQueryでスムーススクロールを作っています。
スマホ用画面（ハンバーガーメニュー使用）ではスムーススクロールできましたが、
PC用画面（左にコンテンツ、右にメニューの2カラム）ではうまくいきません。

画面サイズを取得して場合分けし、
スマホの時は通常のスムーススクロール、
PCの時は下記ページで紹介されているoverflow:scroll内をスムーススクロールする方法にしています。
https://blog.webcreativepark.net/2015/12/16-054605.html

結果、overflowにスムーススクロールを入れるとアンカーリンクが機能しないという事態は解消したものの、
スムーススクロールはしません。

確認したブラウザは
Firefox、Google Chrome、Microsoft Edge
で、結果はすべて、自分のページではうまくいかず紹介ページのデモはきれいに見れています。

ソースは下記のとおりです。

<div class="wrapper clearfix">
	<!-- 左カラム -->
	<div class="left" class="scroll">
		<!-- コンテンツ -->
		<div class="contents">
			<div class="box" id="area-1">
				<h2>コンテンツ1</h2>
				<p>本文が入ります。</p>
			</div>

			<div class="box" id="area-2">
				<h2>コンテンツ2</h2>
				<h3>項目1</h3>
				<p>本文が入ります。</p>
				<p>本文が入ります。</p>
				<p>本文が入ります。</p>
				<h3>項目2</h3>
				<p>本文が入ります。</p>
				<p>本文が入ります。</p>
				<p>本文が入ります。</p>
			</div>

			<div class="box" id="area-3">
				<h2>コンテンツ3</h2>
				<p>本文が入ります。</p>
				<p>本文が入ります。</p>
				<p>本文が入ります。</p>
			</div>

			<div class="box" id="area-4">
				<h2>コンテンツ4</h2>
				<h3>項目1</h3>
				<p>本文が入ります。</p>
				<p>本文が入ります。</p>
				<p>本文が入ります。</p>
				<h3>項目2</h3>
				<p>本文が入ります。</p>
				<p>本文が入ります。</p>
				<p>本文が入ります。</p>
			</div>
		</div><!-- コンテンツ -->
		<!-- フッター　クレジット -->
		<footer class="footer"><p>フッター<br>クレジット</p></footer>
	</div><!-- 左カラム -->
	<!-- 右カラム -->
	<div class="right">
		<!-- ヘッダー　サイト名 -->
		<header class="header">
			<h1><a href="index.html">ページタイトル</a></h1>
		</header>
		<!--  メニュー-->
		<div id="menubtn">
			<i class="fas fa-bars"></i>
		</div>
		<nav class="menu" id="menu">
			<ul>
				<a href="#area-1" data-box=".scroll"><li>メニュー1</li></a>
				<a href="#area-2" data-box=".scroll"><li>メニュー2</li></a>
				<a href="#area-3" data-box=".scroll"><li>メニュー3</li></a>
				<a href="#area-4" data-box=".scroll"><li>メニュー4</li></a>
			</ul>
		</nav>
	</div><!-- 右カラム -->
</div>

@charset "UTF-8";
html{
	height: 100%;
}
*, *::before, *::after{
	box-sizing: border-box;
}
body{
	line-height: 1.5;
}
h2{
	color: #fff;
	text-align: center;
 	background-color: #ccc;
	position: absolute;
	top: -50px;
	right: 20px;
	width: 50%;
	transform: rotate(10deg);
}
a:hover{
	opacity: 0.6;
}
.clearfix::after{
	content: '';
	display: block;
	clear: both;
}
/*コンテンツ*/
.box{
	position: relative;
	margin: 100px 30px;
	padding: 30px 30px;
	background-color: #fff;
	border-radius: 10px;
}
/*フッター　クレジット*/
.footer{
	text-align: center;
}

/* --------------------------------
 * 768px～
 * -------------------------------- */
 @media (min-width:768px) {
	 body{
		background: url('../img/bg.jpg') no-repeat;
		background-size: cover;
		background-position:center;
	 }
	 /*２カラムレイアウト*/
	 .wrapper{
		 position: fixed;
		 margin: 0 10%;
		 width: 80%;
		 height: 100%;
	 }
	 .left{
		 float: left;
		 width: 75%;
		 height: 100%;
		 background-color: rgba(255, 255, 255, 0.6);
		 overflow-y: auto;
	 }
	 .right{
		 float: left;
		 width: 25%;
		 height: 100%;
	 }
	 /*ヘッダー　サイト名*/
	 .header{
		 height: 50%;
		 padding: 10px;
	 }
	 /*メニュー*/
	 #menubtn{
		 display: none;
	 }
	 .menu{
		 width: 150px;
	 }
	 .menu li{
		 display: block;
		 margin: 10px 0;
		 padding: 10px;
		 width: 150px;
		 background-color: #fff;
		 text-align: center;
	 }
 }

 /* --------------------------------
  * ～767px
  * -------------------------------- */
@media (max-width:767px) {
	body::before{
		position: fixed;
		content: '';
		background: url('../img/bg.jpg') no-repeat;
		background-size: cover;
		background-position:center;
		width: 100%;
		height: 100%;
	}
	/*レイアウト*/
	.right{
		position: absolute;
		top: 0;
		left: 0;
	}
	.left{
		position: absolute;
		top: 100px;
		left: 0;
		width: 100%;
	}
	/*ヘッダー　サイト名*/
	.header{
		padding: 0 20px;
	}
	.header a{
		color: #fff;
	}
	/*メニュー*/
	#menubtn{
		position: fixed;
		top: 10px;
		right: 10px;
		padding: 5px;
		width: 40px;
		height: 40px;
		text-align: center;
		background-color: #ccc;
		border-radius: 8px;
		border: 1px solid #000;
		z-index: 1;
	}
	#menubtn i{
		font-size: 30px;
	}
	.menu{
		display: none;
		position: fixed;
		top: 0;
		right: 0;
		padding-top: 60px;
		width: 100%;
		background-color: #ccc;
	}
	.menu li{
		padding: 10px;
		text-align: right;
	}
	/*コンテンツ*/
	.box{
		margin: 30px 5px 60px;
		padding: 20px;
		padding-top: 35px;
	}
}

$(function() {
	// ハンバーガーメニュー
	$("#menubtn").click(function(){
		$("#menu").slideToggle();
	});
	// アンカーリンク
	$("a[href^='#']").click(function(){
		// 画面幅wideを取得
		var wide = $(window).width();
		// if文で条件を比較（画面幅が767より小さいとき）
		if (wide < 767) {
			var adjust = -50;
			var speed = 400;
			var href= $(this).attr("href");
			var target = $(href == "#" || href == "" ? 'html' : href);
			var position = target.offset().top + adjust;
			$('body,html').stop().animate({scrollTop:position}, speed, 'swing');
			return false;}
		// 画面幅が767より大きいとき
		else {
			var adjust = -50;
			var speed = 400;
			var $box = $($(this).data("box"));
			var $tareget = $($(this).attr("href"));
			var dist = $tareget.position().top - $box.position().top;
			$box.stop().animate({scrollTop: $box.scrollTop() + dist + adjust}, speed, 'swing');
			return false;}
	});
});

その他なにか必要な情報がありましたら追記いたします。

Answer 1

	<!-- 左カラム -->
	<div class="left" class="scroll">

上記が間違いです。
クラスを２つ付与したいときは、半角スペースで区切ってください。

	<!-- 左カラム -->
	<div class="left scroll">

Comments

[enokoro]

ありがとうございます！解決しました。
いくつかのサイトで見たやり方をくっつけていく過程で間違った書き方をしてしまっていました。
感謝いたします。