A link that jumps from one section of a web page to another within the same page can be created using the # symbol and an id attribute to specify the target section. This link type is also called an “internal link” or a “jumper link.” It helps users navigate to different parts of the webpage without leaving the page.
In this guide today, we shall be using the # (Hatch) symbol and an id attribute to create it. You can use this approach to create one-page websites that help people easily find what they are looking for or take action quickly. You may also see our expert guide on how to start a blog or website with WordPress without coding.
For example, if you have a ”Register” button, you can give it a scroll navigation feature so that when users click on it, they will be automatically scrolled down to your registration form in seconds (depending on the scrolling timing you give it).
How to create a scroll navigation link on website
Now, we are going to code navigation menu items (Home, Services, About, and Contact) and link them to each of their sections on the same page. That is, people, won’t need to manually scroll through your website before they can see your service list, about your website, and contact details.
If you don’t understand coding while you want to design a website, you use plugin. You may see our expert step-by-step guide on how to design website using Elementor for free without coding. Or watch the video below to learn more how to create back top icon on a website using Elemtor’s icon element.
Here is an HTML code for the navigation menu.
<nav role='navigation'>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#about">About Us</a></li>
<li><a href="#contact">Contact Us</a></li>
</ul>
</nav>
Next, we are going to create a body section. In this body, we shall create four sections (h2, h3, h4, and h5) which include paragraphs to describe what each of them is for. I will also design a call to action (learn more).
I added CSS styles for the navigation menu to create a block-level, fixed-position menu with a green background, a white border at the bottom, and a height of 50 pixels. This styling ensures that the menu stands out visually and remains accessible as users scroll down the page.
/* Styles for the navigation menu */
nav {
display: block;
background-color: #196801; /* Background color set to a shade of green */
border-bottom: 2px solid white; /* A white border at the bottom of the menu */
width: 100%; /* Menu spans the entire width of the viewport */
height: 50px; /* Menu height set to 50 pixels */
position: fixed; /* Fixed position to keep the menu at the top */
}
If you check the code below, you will find their id attributes. Please let me know via the comment section anywhere you are confused, I will reply to you soon.
<!-- Home Section -->
<h2>Welcome to FASTKNOWERS - Your Web Design Experts!</h2>
<p>At FASTKNOWERS, we are your go-to destination for cutting-edge web design solutions. Whether you're a first-time visitor or a loyal client, we're here to help you discover the power of stunning web design.</p>
<p>Explore our website to find the latest in web design trends, learn more about our talented team, and stay updated with our blog posts.</p>
<a href="https://fastknowers.com/">Learn More →</a>
<!-- Services Section -->
<h3>Our Web Design Services</h3>
<p>FASTKNOWERS specializes in a wide range of web design services aimed at transforming your online presence. Our experienced team is committed to delivering high-quality web design solutions that can elevate your brand.</p>
<ul>
<li><strong>Custom Web Design:</strong> Tailored web design solutions to match your unique vision.</li>
<li><strong>Responsive Design:</strong> Ensuring your website looks great on all devices.</li>
<li><strong>E-commerce Design:</strong> Crafting online stores that drive conversions.</li>
<li><strong>Website Redesign:</strong> Giving your existing website a fresh and modern look.</li>
</ul>
<a href="https://fastknowers.com/">Learn More →</a>
<!-- About Section -->
<h4>About FASTKNOWERS - Web Design Excellence</h4>
<p>Get to know FASTKNOWERS and the creative minds that power our success. Our story, mission, and core values define who we are and how we excel in the field of web design.</p>
<p>Discover our journey, meet our passionate team, and understand our commitment to delivering top-notch web design solutions.</p>
<a href="https://fastknowers.com/">Learn More →</a>
<!-- Contact Section -->
<h5>Contact FASTKNOWERS - Let's Create Together!</h5>
<p>We're eager to hear from you! If you have any questions, comments, or project inquiries, please don't hesitate to reach out. Our friendly and dedicated team is ready to assist you.</p>
<p>You can contact FASTKNOWERS through various channels:</p>
<ul>
<li><strong>Phone:</strong> +2349122075365</li>
<li><strong>Email:</strong> abdulrazaq@fastknowers.com</li>
<li><strong>Address:</strong> Idah, Kogi State</li>
</ul>
<p>Alternatively, you can use the contact form below to send us a message. We'll respond promptly to your inquiry.</p>
<a href="https://fastknowers.com/">Learn More →</a>
</body>
From the CSS code below, font-size: 12px; targets paragraph elements <p> within elements that have the “jump” class.
Without CSS, the design of HTML codes above is unfriendly. Here is how it looks currently.
Now, add the CSS code below to style it.
For each heading level (h2, h3, h4, and h5) within an element with the class .jump, the font size is set to 16px. This means that all these headings within elements with the class .jump will have the same font size of 16 pixels.
The CSS rule combines to style the “Learn More” section button with a dark blue text color, a white background, a minimum width of 200 pixels, a height of 50 pixels, and a centered text alignment. The padding ensures that there is space around the button’s content, and the font size sets the size of the text within the button.
/* Reset default styles and set text color to white for all elements */
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
color: white;
}
/* Styles for a fixed-position button */
.top {
position: fixed;
background-color: rgba(255, 255, 255, 0.5);
text-align: center;
bottom: 1.5rem;
right: 1.5rem;
width: 3rem;
height: 3rem;
line-height: 3rem;
font-size: 1.5rem;
border-radius: .5rem;
border: 1px solid white;
box-shadow: 0 0 2px 0px white;
transition: opacity 1s ease;
opacity: 0;
cursor: pointer;
}
/* Styles for the button when the page is scrolled */
.top.scrolled {
color: #000;
text-shadow: 0px 0px 2px #fff;
opacity: 1;
}
/* Styles for an unordered list */
ul {
list-style: none;
text-align: center;
}
/* Set font size to 12px for <ul> within .jump */
.jump ul {
font-size: 12px;
}
/* Styles for list items (menu items) */
li {
display: inline-block;
}
/* Styles for hyperlinks */
a {
text-decoration: none;
color: white;
display: block;
padding: 1rem;
transition: color 1s ease;
}
/* Styles for the navigation menu */
nav {
display: block;
background-color: #196801;
border-bottom: 2px solid white;
width: 100%;
height: 50px;
position: fixed;
}
/* Styles for the selected menu item on hover */
li a:hover {
color: red;
}
/* Styles for the selected menu item when active */
li a:active {
color: red;
}
/* Styles for elements with the "jump" class (content boxes) */
.jump {
height: 1000px;
border-bottom: 2px solid white;
padding-top: 50px;
color: black;
font-size: 50px;
text-align: center;
}
/* Styles for the "home" content section */
#home {
background-color: #663399;
}
/* Styles for the "services" content section */
#services {
background-color: #bada55;
}
/* Styles for the "about" content section */
#about {
background-color: goldenrod;
}
/* Styles for the "contact" content section */
#contact {
background-color: red;
}
/* Styles for <h2> elements */
.jump h2 {
font-size: 16px; /* Set font size to 16px for <h2> within .jump */
}
/* Styles for <h3> elements */
.jump h3 {
font-size: 16px; /* Set font size to 16px for <h3> within .jump */
}
/* Styles for <h4> elements */
.jump h4 {
font-size: 16px; /* Set font size to 16px for <h4> within .jump */
}
/* Styles for <h5> elements */
.jump h5 {
font-size: 16px; /* Set font size to 16px for <h5> within .jump */
}
/* Styles for <p> elements */
.jump p {
font-size: 12px; /* Set font size to 12px for <p> within .jump */
}
/* Styles for the "Learn More" section button */
.section-btn {
display: inline-block;
color: darkblue;
background: white;
min-width: 200px;
height: 50px;
padding: 16px; /* Equal padding on all sides, 16px on all sides */
text-align: center;
font-size: 16px;
}
In the provided CSS code, the background color for each of the sections with the IDs “home,” “services,” “about,” and “contact” is changed using the background-color property. Each section is uniquely identified by its ID, and the CSS rules target these IDs to set specific background colors. Here’s how it’s done:
- Styles for the “home” content section:
#home {
background-color: #663399;
}
#home: This is an ID selector that targets the HTML element with the ID “home.”background-color: #663399;: This line sets the background color of the “home” section to a shade of purple (#663399).
- Styles for the “services” content section:
#services {
background-color: #bada55;
}
#services: Similar to the previous rule, this ID selector targets the HTML element with the ID “services.”background-color: #bada55;: This line sets the background color of the “services” section to a shade of greenish-yellow (#bada55).
- Styles for the “about” content section:
#about {
background-color: goldenrod;
}
#about: This ID selector targets the HTML element with the ID “about.”background-color: goldenrod;: This line sets the background color of the “about” section to the color “goldenrod,” which is a shade of yellow.
- Styles for the “contact” content section:
#contact {
background-color: red;
}
#contact: This ID selector targets the HTML element with the ID “contact.”background-color: red;: This line sets the background color of the “contact” section to the color red.
When a user hovers over a navigation menu item (which is represented by an <a> element inside an <li> element), the text color of that item will change to red as visual feedback to indicate interactivity (check line 72 in the code above).
Finally, this is how the HTML and CCS codes above work.
Conclusion
Scroll navigation links provide a user-friendly way for visitors to navigate through a webpage, especially when the page is long. Instead of manually scrolling, users can click on the links to jump directly to specific sections. It can be added using the # and id attribute as discussed in this article.
Hope this article has helped you know how to create a scroll navigation link using HTML in conjunction with # and id attributes on the website. You may also see how to code a header that sticks while scrolling.
If you know that this guide has helped you know how to create a link that jumps users to another section on a website without reloading a web browser, then please subscribe to my YouTube channel for more updates. You can also find me on Facebook.
