Якорные ссылки (href) не работают при использовании в гибкой макете с гибким направлением: строка

Question

У меня есть три страницы по горизонтали, каждая страница заполняет весь экран, причем фиксированное меню имеет ссылки, которые перескакивают на определенную страницу. Однако также можно прокручивать вправо, чтобы попасть на каждый экран.

Если одновременно видны две страницы (пример: половина страницы-2 и половина страницы-3), ссылки привязки к этим страницам не работают, работает только ссылка на страницу-1. После этого все ссылки снова начнут работать.

Это прекрасно работает в режиме столбцов. Я предполагаю, что это связано с тем, что якорные ссылки на верхнюю часть раздела и в альбомном режиме я хотел бы, чтобы он отображал его сбоку?

Ниже весь мой CSS

body{ 
    font-size:0px; 
} 

h1{ 

    font-family: 'Londrina Solid', cursive; 
    font-size:120px; 
    text-align: center; 
    color:rgba(153,0,0,1); 
    text-shadow: -1px -1px #A99E9E; 
} 

p{ 

    font-family: 'Titillium Web', sans-serif; 
    font-size:25px; 
    color:rgba(255,255,255,1); 
    background-color:rgba(153,0,0,0.8);; 
    text-shadow: 4px 4px 10px #000000; 

} 

.pad{ 

    margin-top:33vh; 
    display:flex; 
    flex-direction:column; 

} 

.line1{ 

    text-align:center; 
    margin-right:32vw; 
    margin-left:21vw; 
    margin-top:2vh; 
    padding-top:1vh; 
    padding-bottom: 2vh; 
} 

.line2{ 

    text-align:center; 
    margin-right:19vw; 
    margin-left:33vw; 
    margin-top:6vh; 
    padding-top:2vh; 
    padding-bottom: 2vh; 
} 

.menu{ 

    position:fixed; 
    left:0; 
    right:0; 
    padding-left:33.33vw; 
    padding-right:33.33vw; 
    min-height:10vh; 
    text-align:center; 
    background-color:rgba(42, 37, 240, 0.7); 
    display:flex; 
    flex-direction:row; 
    justify-content: space-around; 
} 

.menu a{ 
    font-family: 'Londrina Solid', cursive; 
    text-decoration:none; 
    font-size:25px; 
    color:rgba(255,255,255,0.9); 
    font-weight:bold; 
    padding-top:3vh; 
    padding-bottom:3vh; 
    padding-right:4vw; 
    padding-left:4vw; 
    text-shadow: 5px 5px 15px #000000; 

} 

.menu a:hover{ 
    background-color:rgba(4, 3, 70, 0.5); 
} 

section:nth-child(1){ 

    height:100vh; 
    width:100vw; 
    background-image: url("images/hot-cup.jpg"); 
    background-size:cover; 
    background-position:center; 

} 

section:nth-child(2){ 
    height:2vh; 
    width:100vw; 
    background-color: darkred; 
} 

section:nth-child(3){ 

    height:100vh; 
    width:100vw; 
    background-image: url("images/orange-quarters.jpg"); 
    background-size:cover; 
    background-position:center; 
} 

section:nth-child(4){ 
    height:2vh; 
    width:100vw; 
    background-color: darkred; 
} 

section:nth-child(5){ 

    height:100vh; 
    width:100vw; 
    background-image: url("images/cosy-cafe.jpg"); 
    background-size:cover; 
    background-position:center; 
} 

article{ 

    display:flex; 
    flex-direction: column; 



} 




@media screen and (orientation:landscape) and (max-width: 668px) and (max-height: 400px) { 

    article{ 
     flex-direction:row; 
     width:304vw; 
    } 

    h1{ 
     margin-left:10vw; 
     font-size:80px; 
    } 

    section#border1{ 
     height:100vh; 
     width:2vw; 
    } 

    section#border2{ 
     height:100vh; 
     width:2vw; 
    } 

    .menu a{ 
     font-size:45px; 
     padding-top:10vh; 
     padding-bottom:10vh; 
    } 

    .pad{ 
     margin-top:7vh; 
    } 

    .line1{ 
     margin-right:24vw; 
     margin-left:25vw; 
     font-size:20px 
    } 
    .line2{ 
     margin-right:9vw; 
     margin-left:39vw; 
     font-size:20px 
    } 

    .menu{ 
     top:0; 
     bottom:0; 
     position:fixed; 
     left:auto; 
     right:auto; 

     padding-left:0vw; 
     padding-right:0vw; 

     flex-direction:column; 
     margin-right:30vw; 
    } 

} 

@media(max-width:376px){ 

    article{ 
     flex-direction:column; 
    } 

    h1{ 
     font-size:55px; 
    } 

    p{ 
     font-size:14px; 
    } 

    .pad{ 
     margin-top:35vh; 
    } 

    .line1{ 
     font-size:18px; 
     margin-left:15vw; 
    } 
    .line2{ 
     font-size:18px; 
     margin-left:26vw; 
     margin-right:9vw; 
    } 

    .menu a{ 
     font-size:25px; 
     padding-bottom:2.3vh; 
     padding-top:2vh; 
     padding-right:0vw; 
     padding-left:0vw; 
    } 

    section#border1{ 
     height:2vh; 
     width:100vw; 
    } 

    section#border2{ 
     height:2vh; 
     width:100vw; 
    } 

    .menu{ 
     top:auto; 
     bottom:auto; 
     position:fixed; 
     left:0; 
     right:0; 

     padding-left:0vw; 
     padding-right:0vw; 

     flex-direction:column; 

    } 
} 

Answer 1

Может использовать некоторый класс для показа страниц?

<div class="menu"> 
<nav> 
    <ul> 
    <li><buttom class="pageGo1">page#1</buttom></li> 
    <li><buttom class="pageGo2">page#2</buttom></li> 
    <li><buttom class="pageGo3">page#3</buttom></li> 
    </ul> 
</nav> 
</div> 
<div class="page page-1"> 
    page #1 
</div> 
<div class="page page-2"> 
    page #2 
</div> 
<div class="page page-3"> 
    page #3 
</div> 


.menu { 
    position: fixed; 
    z-index: 100; 
    left: 0; 
    top: 0; 
} 

.menu li { 
    display: inline-block; 
    padding-right: 120px; 
} 

.page { 
    position: absolute; 
    right: -100%; 
    width: 100%; 
    height: 100%; 
    background: blue; 
    padding: 100px; 
    box-sizing: border-box; 
    transition: 200ms; 
} 

.page-2 { 
    background-color: red; 
} 

.page-3 { 
    background-color: green; 
} 

.page.active { 
    right: 0; 
} 


$(".pageGo1").click(function() { 
    $(".page-1").addClass("active"); 
}); 
$(".pageGo2").click(function() { 
    $(".page-2").addClass("active"); 
}); 
$(".pageGo3").click(function() { 
    $(".page-3").addClass("active"); 
}); 

Простой пример https://jsfiddle.net/8wg6ogss/