Difficulty navigating to different sections of a webpage using HTML

I'm facing a strange issue. The title pretty much sums it up. Here's a snippet of the code:

<a href="#test1">Go to test 1</a>
<a href="#test2">Go to test 2</a>
<a href="#test3">Go to test 3</a>
<a href="#test4">Go to test 4</a>
<a href="#test5">Go to test 5</a>
<a href="#test6">Go to test 6</a>
<a href="#test7">Go to test 7</a>
<a href="#test8">Go to test 8</a>

<div id="test1">Some text for test 1</div>
<div id="test2">Some text for test 2</div>
<div id="test3">Some text for test 3</div>
<div id="test4">Some text for test 4</div>
<div id="test5">Some text for test 5</div>
<div id="test6">Some text for test 6</div>
<div id="test7">Some text for test 7</div>
<div id="test8">Some text for test 8</div>

In my case, this is just a demo and in reality, my page has more content so the "jumping" effect is more noticeable. This piece of code seems not to be working (at least for me). It only adds a #test to the link but doesn't scroll down to the respective section. Any idea what I might be doing wrong? Thanks in advance. And pardon my English, as it's not my native language.

Edit: So, on my website, when using such links I wanted to move to a div that is positioned above the link, which was not functioning properly. But then I moved the target div below the link and it started working. Is there any way for such links to move to higher placed divs?

htmlcss

Answer №1

@Sean, I appreciate the correction

The page does not "jump" because it is not long enough to require scrolling.

If you adjust the elements with a margin-bottom to prevent all content from being immediately visible, you will notice that the page indeed "jumps". Take a look at this code snippet for a demonstration.

a, div{
    display: block;
    margin-bottom: 100vh;
}
<a href="#test1">Go to test 1</a>
<a href="#test2">Go to test 2</a>
<a href="#test3">Go to test 3</a>
<a href="#test4">Go to test 4</a>
<a href="#test5">Go to test 5</a>
<a href="#test6">Go to test 6</a>
<a href="#test7">Go to test 7</a>
<a href="#test8">Go to test 8</a>

<div id="test1">Some text for test 1</div>
<div id="test2">Some text for test 2</div>
<div id="test3">Some text for test 3</div>
<div id="test4">Some text for test 4</div>
<div id="test5">Some text for test 5</div>
<div id="test6">Some text for test 6</div>
<div id="test7">Some text for test 7</div>
<div id="test8">Some text for test 8</div>

Answer №2

If you find that the page is not scrolling, it may be because the content is not long enough to warrant scrolling. Simply increasing the height of the page can resolve this issue.

body {
  height: 200vh;
}
<a href="#test1">Go to test 1</a>
<a href="#test2">Go to test 2</a>
<a href="#test3">Go to test 3</a>
<a href="#test4">Go to test 4</a>
<a href="#test5">Go to test 5</a>
<a href="#test6">Go to test 6</a>
<a href="#test7">Go to test 7</a>
<a href="#test8">Go to test 8</a>

<div id="test1">Some text for test 1</div>
<div id="test2">Some text for test 2</div>
<div id="test3">Some text for test 3</div>
<div id="test4">Some text for test 4</div>
<div id="test5">Some text for test 5</div>
<div id="test6">Some text for test 6</div>
<div id="test7">Some text for test 7</div>
<div id="test8">Some text for test 8</div>

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

Steps for displaying input forms in rows one by one

I am currently struggling to format a form properly. In the form I'm working on, I want the first name and last name to be displayed in one row, followed by email and phone number in the same row but different column, and below that, password and conf ...

htmlcss

Mobile browser registers double click/tap event

My mobile web application has a feature where clicking a button will automatically create a team of players for you. If you don't have any players in your team yet, you won't receive a warning. However, if there are already players in your team, ...

androidjqueryhtmliosjquery-mobile

`Text area label in Bootstrap not aligned properly`

Currently, I am working on a bootstrap form containing basic input fields and a few textarea elements. I am utilizing Django for my form validation process. However, I am facing an ongoing issue with aligning the validation labels under the textarea compon ...

htmlcssdjangotwitter-bootstrap

Tips for maintaining an open ng-multiselect-dropdown at all times

https://www.npmjs.com/package/ng-multiselect-dropdown I have integrated the ng multiselect dropdown in my Angular project and I am facing an issue where I want to keep it always open. I attempted using the defaultOpen option but it closes automatically. ...

htmlangulartypescriptng-multiselect-dropdown

Resolving Discrepancies in SVG Rendering on MacOS between iOS and Chrome

I am trying to create a title that adjusts its size based on the screen width without breaking into multiple lines. I am currently using an SVG technique to achieve this effect. Here is the code snippet: <!DOCTYPE html> <html lang="en"> <h ...

htmlcsstwitter-bootstrapdynamic-text

Upon clicking the "show more information" button on the page, JavaScript executes the function to display additional details

<a href="#" class="button">Read More</a><br> I'm currently struggling with programming a button on my website. Specifically, I need the Read More button to display all information related to the CDs I have for sale when clicked. A ...

javascripthtml

Is there a way to determine the remaining time between the present moment and a specific time in JavaScript?

Here's a snapshot of the snippetI have this great idea for a prayer app that can calculate the time remaining between the current time and the scheduled prayer times. My initial approach was to directly find the difference using the following code: ...

javascripthtml

css - unable to achieve center alignment

Seeking help with adjusting the alignment of a centered div in this JSFiddle example. The goal is to have the text align vertically and horizontally within the div, but the current setup results in the top line being centered instead of the overall content ...

htmlcss

I aim to utilize JavaScript to capture the constantly changing font color that is randomly generated

Is there a way to extract the font color from a table element? #FF0000 For example, it could be #568000 etc.. Here's my table <table class="mytable"> <th class=vertical bgcolor=#C0C0C0 align=center> <font color=#FF0000 size= ...

javascriptjqueryhtmlcssfonts

adjust the webpage to be optimized for the size of the screen

Looking to adjust the webpage layout so that it fits perfectly on the screen without the need for vertical or horizontal scrolling. Additionally, we want the image to be centered. See below for the current code snippet: #copyright { top: 0px; right: ...

htmlcss

Moving the search box of a Jquery Datatable to a new location

Is it possible to reposition the filter box outside of the jQuery data table and make it look like this? What steps do I need to take to achieve that? ...

jquerycssdatatablesjquery-datatables-editor

What are the steps for setting up secure video streaming with authentication on NodeJS and HTML?

Within my backend, I have the following route implemented: const { id } = req.params if (!id) return res.status(500).send({ message: 'Invalid request' }) const videoPath = `videos/${id}.mp4` const videoStat = fs.statSync( ...

htmlnode.jsvideo

In HTML, an important concept to understand is how float:left is necessary when the combined widths of child blocks equal

Apologies if my question seems redundant, I was having trouble finding the right search terms. Let's discuss a scenario with a parent <div> containing two inline-block children, each with a width of 50%. If we don't apply overflow: hidden ...

htmlcss

IE9 - The suitable alternative for framesets

Currently, I am experiencing an issue with framesets in my website. Ever since IE9 (HTML5), framesets have been deprecated which triggers quirks mode and causes a slowdown in the loading of my page. I am seeking suggestions for an appropriate HTML5 compa ...

htmliframeinternet-explorer-9frameframes

What is the best way to add multiple lines of text to a webpage using the span element?

Currently, I am developing a game that involves using a map, which consists of multiple lines. My question is whether it is possible to have the span tag cover multiple lines while ensuring that each line ends with a new line character. Below is an exampl ...

javascripthtml

What causes my words to link together, and what is the term for this phenomenon?

Is there a specific term for the way my font is changing automatically? How can I emulate this effect on other text? And how do I remove it if needed? https://i.sstatic.net/yIe2f.png ...

htmlcss

Are there automatic margins in the top side navigation bar?

I have observed that every time I attempt to create a navigation bar, there is an unwanted left and top margin of approximately 8px. This margin seems to persist regardless of the code in my CSS file. I am starting to wonder if this is some sort of default ...

htmlcss

How to create a fixed header navigation in SquareSpace

If you take a look at my Squarespace website using the Adirondack theme over here: The issue I'm facing is that whenever I scroll on either desktop or phone, the top header area shrinks. Currently, the navigation remains fixed on the screen and the l ...

htmlcss

What is the best way to align two different header (h2) tags side by side?

How can I display a person's name and the date on the same line with the name aligned left and the date aligned right? <h2>Firstname Surname</h2><text align="right"><h2>Date</h2> The code above results in both elements ...

htmlcssalignment

How can the style of a div's :after pseudo-element be modified when hovering over its :before pseudo-element?

Here is some CSS code: .myDiv:before{ content:''; width:15px; height:15px; display:block; } .myDiv:after{ ... ... display:none; } And here is the corresponding HTML code: <div class='myDiv'></div> ...

htmlcsshover