How come my links to the ID sections stop working after the third page?

I am currently developing a horizontally scrolling website with 4 sections. Each section is identified by the following IDs:

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

Upon loading the website, users are initially shown 'Section 1', which contains a hyperlink that directs them to #section2 when clicked. However, an issue arises once they reach the third section - the hyperlink meant to take them to #section4 unexpectedly sends them back to #section1.

I suspect that this problem may be related to the dimensions of the container and sections, but I am struggling to pinpoint the exact cause. Initially, with only 3 sections, I encountered difficulties reaching section 3 until adding section 4.

Codepen Link

Any assistance in resolving this matter would be greatly appreciated. Thank you.

javascripthtmlcssscrollinline

Answer №1

Implement this solution by incorporating the scroll-behavior:smooth and overflow-x:scroll CSS properties, ensuring that the scrollbar is hidden without the need for JavaScript.

The primary challenge lies in determining the target position, but this technique proves to be straightforward and adaptive.

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">
      <!-- Ensure the link directs 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>

Answer №2

Upon revising the code, I have made some modifications and provided a CodePen link for reference: [codepenlink][1] [1]: https://codepen.io/nizalsha/pen/qBJdLLG

Answer №3

Could you please take a look at the code link provided below? It should work for you.

In the second section, there seems to be an incorrect ID specified. Simply include the "scroll-behavior: smooth;" CSS property in your html and body tags.

No JavaScript is required as it functions with just CSS and the correct ID.

You can find more details at 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">
      <!-- Correct 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to swap out values in a JavaScript Object for new ones?

I need to update the initial values of myObject with new names: let myObject = [ { name: 'X0', values: 'FALSE,TRUE' } , { name: 'X1', values: 'NORMAL,LOW,HIGH' } , { name: 'X2', values: ' ...

javascriptarraysreplace

When using Ajax in Jquery and expecting data of type JSON, the response always seems

Looking to create a basic jQuery Ajax script that checks a user's discount code when the "Check Discount Code" button is clicked? Check out this prototype: <script> jQuery(function($) { $("#btn-check-discount").click(function() { c ...

javascriptjqueryajaxwordpress

When attempting to use jQuery's load function on a local machine, it fails to function properly

When the window's width is less than 600px, I need to load an HTML file into an existing div. Here is the code I am using: <head> <script> $(document).ready(function(){ if($(window).width() < 600) { $("#testing_ ...

javascriptjquery

Relocate the preview division below the button in the Kartik File Input Widget

There are two input file buttons that allow users to upload an image on each button. Upon selecting an image, a preview of the image will be displayed above the button. The current layout is shown here: https://i.sstatic.net/aLAbo.png When images of diff ...

javascriptjquerycssfile-uploadwidget

What does the reportProgress function do in HTTP services with JavaScript?

Can someone explain the functionality of reportProgress in JavaScript, specifically when used with Angular Typescript? I am having trouble finding documentation on this. return this.httpClient.request<ProductResponse>('get',`${this.basePath ...

javascriptangulartypescriptapiswagger-codegen

A search form utilizing prepared statements in mysqli

Well met again, everyone. I recently reached out for help on improving some messy code I had put together, and the response was swift. Thank you for that! You can find the original question thread here: PHP - Search database and return results on the sam ...

phphtmlmysqli

What is the most effective way to inform the user when the nodeJS server can be accessed through socketIO?

I have developed a web app that indicates to the user when the server is online for data submission. Although the current code functions properly for single-user interaction, I am facing an issue where one user's connection or disconnection directly i ...

javascriptnode.jshtmlsocket.io

Using ngTouch for ng-click events on the body element can cause issues with links and input fields on mobile

Seeking assistance with a unique issue I am facing on my app-like website. I have implemented a swipable menu but I want it to close whenever the user taps outside the menu. I have tried using ngTouch for swiping and attached ng-click="menuToggled = false" ...

javascriptangularjsmobileangularjs-ng-clickangularjs-ng-touch

Can the outcomes be showcased again upon revisiting a page?

Whenever I navigate away from and return to my filter table/search page, the results vanish. I'm looking for a way to preserve the results without reloading the page. Essentially, I want the page to remain as it was originally, with the search results ...

javascripthtmljquerycss

Add a checkbox element to a web API using ReactJS

I'm currently learning react and encountering an issue with checkboxes that I can't seem to resolve. I am working on a modal for updating and inserting data in a .net core web api, which is functioning correctly. However, within the app, I'm ...

javascriptreactjscheckbox

Rotate clockwise function for navItem Title in Wheelnav.js

Can I rotate the title clockwise for specific navItems only? I have discovered that the following code affects all of them: wheel.titleCurved = true; wheel.titleCurvedClockwise = true; ...

javascriptnavigationwheelnav.js

Efficiently transferring input to a Typescript file

Is there a better way to capture user input in Angular and pass it to TypeScript? <form > <input #input type="text" [(ngModel)]="inputColor" (input)="sendInput(input.value)" /> </form> The current method involves creating a ...

htmlangulartypescript

What is the best way to delete a table that I created through my programming?

I have utilized the following code to create a table: <html> <head> <title>Table Time</title> </head> <body> <table border="1px"> <tr> ...

htmlhtml-table

The function in JavaScript that is supposed to receive a value from a servlet is malfunctioning

I am encountering an issue with my JavaScript method that is supposed to display an alert on the document body's onload event. The method takes a single string parameter provided by the servlet. Although the value is retrieved successfully, it seems ...

javajavascripthtmlservletsjstl

Adjusting the projection matrix parameters in Three.JS

My goal for this project is to manually adjust the parameters of the projection matrix. For instance, I would like to have the ability to do something similar to the following: camera.projectionMatrix[15] = 1; Is there a way to achieve this in Three.JS? ...

javascriptwebglthree.js

Invoke function within bxslider callback

I am attempting to utilize a custom function within a bxslider callback, but unfortunately, the function is not being recognized (specifically: Uncaught Reference Error: nextSlideCustom() is not a function) The current code snippet I have is as follows: ...

javascriptjquerybxslider

Issue arising from CSS and div elements

I am facing some challenges in making certain divs behave as desired. Take a look at the following references: Link 1: - contains two divs Link 2: - has only one div I am trying to utilize two divs (.content) without them being positioned incorrectly ...

csshtml

What is the proper way to retrieve the value of the key "order" from this JSON object (containing semicolons in the name)?

Vijay Anand inquired about this particular matter yesterday, unfortunately, the discussion was closed before receiving any solutions: HTTP Response: { "entry": { "@xml:base": "https://API_PROC_SRV/", "@xmlns": "http://www.w3.org/2005/Atom", ...

javascriptjson

Is optgroup malfunctioning in IE 10?

My main question is: does optgroup not function properly in IE? The Plnkr code works fine in Chrome but encounters issues in IE 10. I'm trying to find a solution that will work across both browsers. Is this a known problem? In Chrome, I can expand/co ...

javascriptjquerycssangularjsinternet-explorer

Caught in a dilemma between flex-end and space-between, with margin thrown into the mix

When working with a flexbox and using justify-content:space-between, the first and last items are aligned to the edges of the flex container, with space distributed between them. But how can I align the first item to the right while keeping all other items ...

htmlcssflexboxcss-calc