Skip to main content
adicionou 8 caracteres ao conteúdo
Fonte Link
Icaro Martins
  • 4,3mil
  • 14
  • 24
  • 35

'''

Time Line
<!-- 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>
<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" />
'''

'''

Iframe
<!-- 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"
   DOCTYPE rel="stylesheet">html>

<style>
    body {
        overflow-y: hidden;
        overflow-x: hidden;
        font-family: 'Open Sans',<html sanslang="pt-serif !important;
    }br">

    article {<head>
       <meta margincharset="utf-bottom: 300px;8">
    }<title>Time Line</title>

    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.contgstatic.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: flex;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>
'''

'''

Time Line
<!-- 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>
<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" />
'''

'''

Iframe
<!-- 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>
<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>
'''
<!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>
Fonte Link

Ancora de site no iframe mexe a página principal

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)

'''

Time Line
<!-- 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>
<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" />
'''

'''

Iframe
<!-- 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>
<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>
'''