Why won't my hyperlinks to ID sections continue past the third page?

Question

I'm working on a horizontally scrolling website, and I have 4 sections. Each section is ID'd as follows:

<section id="section1">
<section id="section2">
<section id="section3">
<section id="section4">

When you load the website, you are shown 'Section 1', and the text is hyperlinked to push you to #section2 when clicked. This works fine until it gets to the third section, when all of the a sudden the hyperlink that is suppose to push the user to #section4, pushes back to #section1.

I'm under the impression that it has something to do with container and section width, but I can't figure out the issue. I originally only had 3 sections, and could not get to section 3 unless I added section 4.

Codepen Link

Any help is appreciated, thank you

I also can only get the page to scroll to section3 by linking the user to section4, very weird. — ChrisWeigen, Apr 11 '23 at 06:36
we will see, what is actual problem, i think the problem is in scroll click function — Yuvaraj M, Apr 11 '23 at 06:37

Yuvaraj M · Accepted Answer · 2023-04-11T06:54:46.127

Use this approach by adding scroll-behavior:smooth and overflow-x:scroll css property with scroll bar hidden, no javascript is required

The actual problem is calculating the target position but this method quite simple and responsive

html {
  margin: 0;
  padding: 0;
  overflow-x: scroll;
  font-family: Arial, sans-serif;
  scroll-behavior:smooth;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* Internet Explorer 10+ */
}
html::-webkit-scrollbar { 
width: 0;
height: 0;
}
nav {
  display: flex;
  justify-content: space-around;
  background-color: #333;
  padding: 1rem 0;
}

nav a {
  color: white;
  text-decoration: none;
}

nav a:hover {
  text-decoration: underline;
}

.container {
  display: flex;
  flex-direction: row;
  width: 400vw;
}

section {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  box-sizing: border-box;
}


#section1 { background-color: #f1c40f; }
#section2 { background-color: #2ecc71; }
#section3 { background-color: #3498db; }
#section4 { background-color: #2ecc71; }

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Horizontal Scrolling Webpage</title>
  <link rel="stylesheet" href="styles.css">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

  <div class="container">
    <section id="section1">
      <a href="#section2" class="scroll-link">
        Section 1
      </a> 
    </section>
    
    <section id="section2">
      <a href="#section3" class="scroll-link">
        Section 2
      </a>
    </section>
    
    <section id="section3">
      <!-- Fix the link to point to #section1 -->
        <a href="#section4" class="scroll-link">
  Section 3
        </a>
    </section>
    
       <section id="section4">
    <a href="#section1" class="scroll-link">
      Section 4
    </a>
  </section>

      
  </div>

  <script src="scripts.js"></script>
</body>
</html>

score 1 · Answer 2 · answered Apr 11 '23 at 06:45

1

I have updated your code and here is the link: [codepenlink][1] [1]: https://codepen.io/nizalsha/pen/qBJdLLG

answered Apr 11 '23 at 06:45

Nizal Sha

94
9

https://codepen.io/nizalsha/pen/qBJdLLG – Nizal Sha Apr 11 '23 at 06:47

score 1 · Answer 3 · answered Apr 11 '23 at 07:15

Can you please check the below code link? Hope it will work for you.

You have given the wrong ID in the second section. You just need to add the "scroll-behavior: smooth;" CSS property in your html and body tags.

And you don't need to add any Javascript it works with CSS and ID.

Please refer to this link: https://jsfiddle.net/yudizsolutions/p5gkfmw3/

body,
html {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  font-family: Arial, sans-serif;
  scroll-behavior: smooth;
}

nav {
  display: flex;
  justify-content: space-around;
  background-color: #333;
  padding: 1rem 0;
}

nav a {
  color: white;
  text-decoration: none;
}

nav a:hover {
  text-decoration: underline;
}

.container {
  display: flex;
  flex-direction: row;
  width: 400vw;
}

section {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  box-sizing: border-box;
}

#section1 {
  background-color: #f1c40f;
}

#section2 {
  background-color: #2ecc71;
}

#section3 {
  background-color: #3498db;
}

#section4 {
  background-color: #2ecc71;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Horizontal Scrolling Webpage</title>
  <link rel="stylesheet" href="styles.css">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body>

  <div class="container">
    <section id="section1">
      <a href="#section2" class="scroll-link">
        Section 1
      </a>
    </section>

    <section id="section2">
      <a href="#section3" class="scroll-link">
        Section 2
      </a>
    </section>

    <section id="section3">
      <!-- Fix the link to point to #section1 -->
      <a href="#section4" class="scroll-link">
  Section 3
        </a>
    </section>

    <section id="section4">
      <a href="#section1" class="scroll-link">
      Section 4
    </a>
    </section>


  </div>

  <script src="scripts.js"></script>
</body>

</html>

Why won't my hyperlinks to ID sections continue past the third page?

3 Answers3