Ola, tenho um site onde tenho uma linha do tempo que montei, quando clico em cada ano da linha do tempo, o iframe abaixo dele mexe direcionando para um texto específico na página, o problema é que exclusivamente no google chrome, quando clico em um ano, a ancora puxa o iframe para a posição certa, porem a ancora tambem faz a página principal descer até a posição do iframe, teria como concertar isso?
Toda a animação está em javascript, e tudo relacionado a ancora esta em html e css apenas (assim como a ancora tambem está em html)
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title>Time Line</title>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link
href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap"
rel="stylesheet">
<style>
body {
font-family: 'Open Sans', sans-serif !important;
}
.timeline {
position: absolute;
/* margin-top: -60px; */
}
.mark {
position: absolute;
visibility: hidden;
/* margin-top: -60px; */
}
.year {
margin-top: 50px;
display: inline-block;
}
.down {
margin-top: 0px;
display: block;
visibility: visible;
transition: 0.5s;
}
.history {
margin-left: 165px;
margin-top: 30px;
width: 800px;
height: 300px;
border: none;
}
</style>
<script>
function yearSelect(year) {
document.getElementById("mark0").style.visibility = "hidden";
document.getElementById("mark1").style.visibility = "hidden";
document.getElementById("mark2").style.visibility = "hidden";
document.getElementById("mark3").style.visibility = "hidden";
document.getElementById("mark4").style.visibility = "hidden";
document.getElementById("mark5").style.visibility = "hidden";
document.getElementById("mark6").style.visibility = "hidden";
document.getElementById("mark7").style.visibility = "hidden";
document.getElementById("mark8").style.visibility = "hidden";
document.getElementById("mark9").style.visibility = "hidden";
document.getElementById("year0").style.color = "black";
document.getElementById("year1").style.color = "black";
document.getElementById("year2").style.color = "black";
document.getElementById("year3").style.color = "black";
document.getElementById("year4").style.color = "black";
document.getElementById("year5").style.color = "black";
document.getElementById("year6").style.color = "black";
document.getElementById("year7").style.color = "black";
document.getElementById("year8").style.color = "black";
document.getElementById("year9").style.color = "black";
seta = document.getElementById("down");
seta.style.visibility = "visible";
switch (year) {
case 0:
document.getElementById("mark0").style.visibility = "visible";
document.getElementById("year0").style.color = "#EB194B";
seta.style.margin = "0 0 0 5px"
break;
case 1:
document.getElementById("mark1").style.visibility = "visible";
document.getElementById("year1").style.color = "#EB194B";
seta.style.margin = "0 0 0 126px"
break;
case 2:
document.getElementById("mark2").style.visibility = "visible";
document.getElementById("year2").style.color = "#EB194B";
seta.style.margin = "0 0 0 248px"
break;
case 3:
document.getElementById("mark3").style.visibility = "visible";
document.getElementById("year3").style.color = "#EB194B";
seta.style.margin = "0 0 0 369px"
break;
case 4:
document.getElementById("mark4").style.visibility = "visible";
document.getElementById("year4").style.color = "#EB194B";
seta.style.margin = "0 0 0 491px"
break;
case 5:
document.getElementById("mark5").style.visibility = "visible";
document.getElementById("year5").style.color = "#EB194B";
seta.style.margin = "0 0 0 612px"
break;
case 6:
document.getElementById("mark6").style.visibility = "visible";
document.getElementById("year6").style.color = "#EB194B";
seta.style.margin = "0 0 0 734px"
break;
case 7:
document.getElementById("mark7").style.visibility = "visible";
document.getElementById("year7").style.color = "#EB194B";
seta.style.margin = "0 0 0 855px"
break;
case 8:
document.getElementById("mark8").style.visibility = "visible";
document.getElementById("year8").style.color = "#EB194B";
seta.style.margin = "0 0 0 976px"
break;
case 9:
document.getElementById("mark9").style.visibility = "visible";
document.getElementById("year9").style.color = "#EB194B";
seta.style.margin = "0 0 0 1098px"
break;
}
}
</script>
</head>
<body>
<img src="principal/assets/images/timeline/TimeLine.png" class="timeline" usemap="#map">
<map name="map">
<area shape="circle" coords="20,20,20" href="timeHistory.html#1935" onclick="yearSelect(0)" target="yearHistory" />
<area shape="circle" coords="140,20,20" href="timeHistory.html#1940" onclick="yearSelect(1)" target="yearHistory" />
<area shape="circle" coords="263,20,20" href="timeHistory.html#1950" onclick="yearSelect(2)" target="yearHistory" />
<area shape="circle" coords="385,20,20" href="timeHistory.html#1960" onclick="yearSelect(3)" target="yearHistory" />
<area shape="circle" coords="506,20,20" href="timeHistory.html#1970" onclick="yearSelect(4)" target="yearHistory" />
<area shape="circle" coords="627,20,20" href="timeHistory.html#1980" onclick="yearSelect(5)" target="yearHistory" />
<area shape="circle" coords="749,20,20" href="timeHistory.html#1990" onclick="yearSelect(6)" target="yearHistory" />
<area shape="circle" coords="870,20,20" href="timeHistory.html#2000" onclick="yearSelect(7)" target="yearHistory" />
<area shape="circle" coords="992,20,20" href="timeHistory.html#2010" onclick="yearSelect(8)" target="yearHistory" />
<area shape="circle" coords="1113,20,20" href="timeHistory.html#2020" onclick="yearSelect(9)" target="yearHistory" />
</map>
<img id="mark0" src="principal/assets/images/timeline/Ellipse.png" class="mark" style="visibility: visible !important;">
<img id="mark1" src="principal/assets/images/timeline/Ellipse.png" class="mark" style="margin-left: 121px">
<img id="mark2" src="principal/assets/images/timeline/Ellipse.png" class="mark" style="margin-left: 243px">
<img id="mark3" src="principal/assets/images/timeline/Ellipse.png" class="mark" style="margin-left: 364px">
<img id="mark4" src="principal/assets/images/timeline/Ellipse.png" class="mark" style="margin-left: 486px">
<img id="mark5" src="principal/assets/images/timeline/Ellipse.png" class="mark" style="margin-left: 607px">
<img id="mark6" src="principal/assets/images/timeline/Ellipse.png" class="mark" style="margin-left: 729px">
<img id="mark7" src="principal/assets/images/timeline/Ellipse.png" class="mark" style="margin-left: 850px">
<img id="mark8" src="principal/assets/images/timeline/Ellipse.png" class="mark" style="margin-left: 971px">
<img id="mark9" src="principal/assets/images/timeline/Ellipse.png" class="mark" style="margin-left: 1093px">
<h4 id="year0" class="year" style="margin-left: 2px; color: #EB194B;">1935</h4>
<h4 id="year1" class="year" style="margin-left: 81px;">1940</h4>
<h4 id="year2" class="year" style="margin-left: 80px;">1950</h4>
<h4 id="year3" class="year" style="margin-left: 80px;">1960</h4>
<h4 id="year4" class="year" style="margin-left: 81px;">1970</h4>
<h4 id="year5" class="year" style="margin-left: 80px;">1980</h4>
<h4 id="year6" class="year" style="margin-left: 81px;">1990</h4>
<h4 id="year7" class="year" style="margin-left: 81px;">2000</h4>
<h4 id="year8" class="year" style="margin-left: 81px;">2010</h4>
<h4 id="year9" class="year" style="margin-left: 80px;">2020</h4>
<img id="down" src="principal/assets/images/timeline/Vector.png" class="down" style="margin-left: 5px;">
<iframe name="yearHistory" src="timeHistory.html" class="history" />
</body>
</html>
<!DOCTYPE html>
<html lang="pt-br" style="scroll-behavior: smooth;">
<head>
<meta charset="utf-8">
<title>Iframe</title>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link
href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap"
rel="stylesheet">
<style>
body {
overflow-y: hidden;
overflow-x: hidden;
font-family: 'Open Sans', sans-serif !important;
}
article {
margin-bottom: 300px;
}
.cont {
display: flex;
}
</style>
</head>
<body>
<article id="y1935">
<div class="cont">
<div>
<h3>1935</h3>
</div>
</div>
</article>
<article id="y1940">
<div class="cont">
<div>
<h3>1940</h3>
</div>
</div>
</article>
<article id="y1950">
<div class="cont">
<div>
<h3>1950</h3>
</div>
</div>
</article>
<article id="y1960">
<div class="cont">
<div>
<h3>1960</h3>
</div>
</div>
</article>
<article id="y1970">
<div class="cont">
<div>
<p>
<h3>1970</h3>
</p>
</div>
</div>
</article>
<article id="y1980">
<div class="cont">
<div>
<p>
<h3>1980</h3>
</p>
</div>
</div>
</article>
<article id="y1990">
<div class="cont">
<div>
<h3>1990</h3>
</div>
</div>
</article>
<article id="y2000">
<div class="cont">
<div>
<p>
<h3>2000</h3>
</p>
</div>
</article>
<article id="y2010">
<div class="cont">
<div>
<p>
<h3>2010</h3>
</p>
</div>
</div>
</article>
<article id="y2020">
<div class="cont">
<div>
<p>
<h3>2020</h3>
</p>
</div>
</div>
</article>
</body>
</html>