[Résolu] Conflit :target css target js

bonjour,
Voilà je me retrouve dans une impasse, en effet je suis en train de faire un one page (perso) dans lequel il y a un bouton "back to top" pour revenir en haut de page, j'ai mis un peu de js pour rendre le scroll par les ancres fluide.
Et dans ma deuxième partie de mon html j'ai mis un accordéon avec dans le css un :target pour que ça déroule.
ors dans un premier temps j'ai fais mon accordéon à part de mon index.html et il fonctionne et quand je l'intégre (copier coller) dans mon index.html plus rien.
J'ai creuser bidouillé taper retaper et EUREKA !!! le :target de mon css et le target de mon js sont en conflit et mon accordéon plante mais pas mon scroll.
comment puis-je régler le souci ? une idée ? un lampe ? un miracle ?
Merci d'avance.
cordialement thomas.
PS : LE CODE

LE HTML

<div class="container">
		<ul class="accordion">
			<li>
				<a href="#first" class="accordion-header">1</a>
				<div class="accordion-content" id="first">
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
				</div>
			</li>

			<li>
				<a href="#second" class="accordion-header">2</a>
				<div class="accordion-content" id="second">
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
				</div>
			</li>

			<li>
				<a href="#three" class="accordion-header">3</a>
				<div class="accordion-content" id="three">
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
				</div>
			</li>
		</ul>
</div>	

LE JS

<script>

document.addEventListener('DOMContentLoaded', function() {
  window.onscroll = function(ev) {
    document.getElementById("top").className = (window.pageYOffset > 100) ? "cVisible" : "cInvisible";
  };
});

document.addEventListener('DOMContentLoaded', function() {
  var aLiens = document.querySelectorAll('a[href*="#"]');
  for(var i=0, len = aLiens.length; i<len; i++) {
    aLiens[i].onclick = function () {
      if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
        var target = this.getAttribute("href").slice(1);
        if (target.length) {
          scrollTo(document.getElementById(target).offsetTop, 1000);
          return false;
        }
      }
    };
  }
});

LE CSS

.container{display: block;height:auto; width:100%; max-width: 400px; border-radius: 14px;}

.accordion{
	width: 100%;
	padding: 0;
	margin: 0;
	list-style-type: none;
}

.accordion-header{
	display: block;
	padding: 15px 20px;
	background: #bbb;
	color : white;
	text-decoration: none;
	font-size: 18px;
}

.accordion-content{
	padding: 0;
	height: 0;
	overflow: hidden;
}

.accordion-content:target {
	height: auto; padding: 20px;
}

Bonjour,
Je pense que, c'est ton "return false;" qui doit annuler le click
au clique le lien n'est pas exécuté

Je l'ai commenté dans le code :
https://codepen.io/Zonecss/pen/dmLxPa