Tips for repositioning the window when linking to a different section of a website

Question

Tips for repositioning the window when linking to a different section of a website

As a beginner in HTML and CSS, I am currently working on adding a navigation bar to my one-page website. I want the navigation bar to smoothly guide users to different sections of the page when they click on a link. To achieve this, I am using anchors and reference links like this:

<a name="JR_Harrison_Target"></a>

Then, I link to the section by using:

<a href="#JR_Harrison_Target">Introduction</a>

The issue I am facing is that each time I click on the link, it takes me to the new section with a large margin of pixels at the top of the browser. This happens regardless of which section I try to navigate to. Is there a way for me to adjust the position of the anchor so that the window scrolls accurately to the desired location? Any help would be greatly appreciated. Thank you!

Example of the issue:

https://i.sstatic.net/Uht58.jpg

html css hyperlink

Answer 1

Answer №1

Experiment with this code snippet:

HTML

<div class="menu">
  <a href="#1">1</a>
  <a href="#2">2</a>
  <a href="#3">3</a>
  <a href="#4">4</a>
</div>

<section id="1"></section>
<section id="2"></section>
<section id="3"></section>
<section id="4"></section>

CSS

section {
  height: 400px;
  background: red;
  border: 2px solid black;
}

.menu {
  position: fixed;
  top: 0;
  height: 50px;
  width: 100%;
  background: #fff;
  color: black;
  display: flex;
  align-items: center;
  opacity: .5;
}

.menu a {
  margin: 0 20px;
}

JSFiddle link: http://jsfiddle.net/8m0w2aon/8/

By assigning an id to each section, the links will smoothly scroll to the section when clicked. The content inside each section should not overflow its boundaries, maintaining a fixed height.

Answer 2

Experiment with this code snippet:

HTML

<div class="menu">
  <a href="#1">1</a>
  <a href="#2">2</a>
  <a href="#3">3</a>
  <a href="#4">4</a>
</div>

<section id="1"></section>
<section id="2"></section>
<section id="3"></section>
<section id="4"></section>

CSS

section {
  height: 400px;
  background: red;
  border: 2px solid black;
}

.menu {
  position: fixed;
  top: 0;
  height: 50px;
  width: 100%;
  background: #fff;
  color: black;
  display: flex;
  align-items: center;
  opacity: .5;
}

.menu a {
  margin: 0 20px;
}

JSFiddle link: http://jsfiddle.net/8m0w2aon/8/

By assigning an id to each section, the links will smoothly scroll to the section when clicked. The content inside each section should not overflow its boundaries, maintaining a fixed height.

Tips for repositioning the window when linking to a different section of a website

Answer №1

Similar questions

Content from ajax request is invalid

I require assistance in developing a mouseover image link that conceals the top image and unveils a bottom image that scrolls vertically in the exact same area as the top

The issue with Three.js responsive canvas is that it fails to properly adjust the size of the

Ways to navigate to a different page using HTML response from an AJAX request

Issues with Laravel 8's datatable scripts causing dysfunction

Preserve Chinese characters using Spring-MVC in Java

Looking for assistance with HTML regex (even though I understand it's not the recommended approach)

Suggestions for improving the smoothness of the Bootstrap toggle hide/show feature

How to style the second child div when hovering over the first child div using makeStyles in Material UI

Incorporate a span element within the PHP code located in the final div

Discovering elements through parent in Selenium

Increasing the size of a container without displacing the elements beneath it

stopPropagation() halts the propagation in the opposite direction

Modify the background color of the disabled checkbox in Vuetify

What methods are available to modify HTML content using Node.js?

Utilize jQuery to enclose nested elements within a parent element

The presence of the target tag remains unchanged when a media query is used

"The 'BillInvoice' object must be assigned a primary key value before it is ready for this relationship" - Error Message

The range slider's color value is not resetting correctly when using the <input>

Customizing the layout of specific pages in NextJSIncorporating