Question 42857 in Html Question posted in
Some basic documentation can be found here.

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

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

Tags:

3

Answers


  1. 0

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

    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
  3. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search