0
Hello, I have a website where I have a timeline that I’ve set up, when I click every year of the timeline, the iframe below it moves towards a specific text on the page, the problem is that exclusively on google Core, when I click in a year, the anchor pulls the iframe to the right position, but the anchor also makes the main page descend to the iframe position, would fix it?
All animation is in javascript, and everything related to anchor is in html and css only (just like anchor is also in 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>