ネイティブjavascriptでスクロールで表示非表示の処理が上手くいきません。。

Javascript初心者です。
ネイティブJavascriptでの記述を練習しており、ページトップへ戻るボタンを実装しようとしております。
その際、ページトップから100スクロールしたときにフェードイン/アウトでボタンが出現するという処理を行おうとしましたが、以下の記述で試してみたところ、フェードでの表示非表示はできましたが、スクロールごとにイベントが発生し、ちらついてしまいます。

特にsetInterval();を使った処理じゃないと、というわけではありませんが、原因と対処法をご教授いただければ幸いです。

該当のソースコード

<head>
<style>
#backTop {
	  background: #CAF6CB;
	  width: 80px;
	  height: 80px;
	  position: fixed;
	  bottom: 60px;
	  right: 15px;
	  z-index: 10;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	}
</style>
</head>
<body>
<div id="backTop">backTop</div>

<script type="text/javascript">
	function backTop(){
		var backTop = document.getElementById('backTop');
		backTop.style.opacity = 0;
		window.addEventListener('scroll', function(e) {
			
			var offset = window.pageYOffset;
			var begin = new Date() - 0;
			var myTime = 400; //duration
			var id = setInterval(function() {
			var current = new Date() - begin;
			if (current > myTime) {
				clearInterval(id);
				current = myTime;
			}
				
			//スクロールが100になったら処理
			if(offset > 100){
				backTop.style.opacity = 0 + 1 * (current / myTime);
			} else {
				backTop.style.opacity = 1 - 1 * (current / myTime);
			}
		　}, 10);
		}, false)
	}backTop();	
</script>
</body>