モバイル端末のジャンプ問題を解決する（CSS遷移、ターゲット疑似クラス）

    <本文>
        <メイン>
            <div id="shouye">ショウイエ</div>
            <div id="zhanlan">zhanlan</div>
            <div id="geren">geren</div>
        </メイン>
        <ナビ>
            <a href="#shouye" class="alink">shouye</a>
            <a href="#zhanlan" class="alink">zhanlan</a>
            <a href="#geren" class="alink">geren</a>
        </nav>
    </本文>

*{
パディング: 0;
マージン: 0;
}
体{
高さ：100vh;
幅：100vw;
ディスプレイ: フレックス;
flex-direction: 列;
位置: 相対的;
}
body::after{/*デフォルトの背景*/
内容:「これは私のテキストです」;
フォントサイズ:4em;
位置: 絶対;
左: 50%;
上位: 50%;
不透明度: .8;
変換: translate(-50%,-50%);
}
主要{
幅: 100%;
フレックス: 1;
位置: 相対的;
}
ナビ{
背景色: #2C3E50;
高さ: 8vh;
ディスプレイ: フレックス;
コンテンツの両端揃え: スペースの間;
アイテムの位置を中央揃えにします。
}
ナビ.alink{
フレックス: 1;
色: #C3BED4;
テキスト配置: 中央;
フォントサイズ: 2.5em;
テキスト装飾: なし;
テキスト変換:大文字;
不透明度: .8;
}
nav .alink:nth-child(2){
左境界線: 実線 1px #E9E9E9;
右境界線: 実線 1px #E9E9E9;
}
メイン>div{
位置: 絶対;
幅: 100%;
高さ: 100%;
フォントサイズ: 5em;
変換: translateY(-100%);
遷移期間: 1秒;
}
main>div:target{/*: ターゲット疑似クラスは、リンクを設定した後にクリックされるdivです*/
変換: translateY(0);
zインデックス: 2;
}
メイン>div:nth-child(1):ターゲット{
背景色: #008000;
}
メイン>div:nth-child(2):ターゲット{
背景色: #495A80;
}
メイン>div:nth-child(3):ターゲット{
背景色: #FFFF00;
}