Q: How To Scroll to a particular div position when clicking on a link from another page?
A: After watching the following article and video tutorial, you will definitely be able to make the page scroll to every section while clicking on the navigation link.
Hello Friends, today in this blog you will learn to create Navigation Bar with Scroll To Top Button and Scroll To Every Section using only HTML & CSS. As you guys know I have created several video tutorials related to Navigation Bar and Website Design, but I had not created a separate video about how navigation links scroll their every section on click.
Simply we can understand Navigation bar is the horizontal section on the website that contains various hyperlinks and logos. Hyperlinks help users to a quick move to the particular section or webpages which is related to that nav links.
As we can see the sample of the navigation menu on the webpage. The horizontal section that we can see at the top of the image is our navigation bar. On the left side, there is one logo and on the right side, there are some hyperlinks. On the top side, there is one button. Basically, when we clicked on those navigation links, a related section with that particular links appears smoothly and when we clicked on that arrow up button our main home page appears.
To see the real example and animation of this programming and every code behind creating this scrolling navbar, I have provided a full video tutorial below.
Page Scroll To Every Section Scroll To every Section | Video Tutorial
As you have seen in the given video tutorial. I have kept all hyperlinks in a specific anchor tag. In the section elements, I have given them different IDs and connected their id with hyperlinks (navigation links) simply by doing this our every section starts to appear while clicking on the navigation links.
Also in the scroll to top button, I have given our first section id name (Home), and it starts to scroll to the top while clicking. To make scroll smoother I gave CSS property smooth behavior inside the universal tag(*).
It is a very easy way to make this scrolling while clicking on the link but those friends who are feeling difficulty creating this navigation with scrolling every section can take code from below.
You Might Like This:
Navigation Bar With Page Scroll To Every Section | Free Source Code
To copy the given codes of this programming scroll to every section while clicking on nav links, first, you need to create two files on is an HTML file and another is a CSS file, after creating these two files then you can copy-paste the given codes in your document.
<!DOCTYPE html>
<!-- Created By CodingLab - www.codinglabweb.com -->
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Navigation Bar With Scroll Every Section</title>
<link rel="stylesheet" href="style.css">
<!-- Fontawesome CDN Link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<nav>
<div class="navbar">
<div class="logo"><a href="#">CodingLab</a></div>
<ul class="menu">
<li><a href="#Home">Home</a></li>
<li><a href="#About">About</a></li>
<li><a href="#Category">Category</a></li>
<li><a href="#Contact">Contact</a></li>
<li><a href="#Feedback">Feedback</a></li>
</ul>
</div>
</nav>
<section id="Home">Home Section</section>
<section id="About">About Section</section>
<section id="Category">Category Section</section>
<section id="Contact">Contact Section</section>
<section id="Feedback">Feedback Section</section>
<div class="button">
<a href="#Home"><i class="fas fa-arrow-up"></i></a>
</div>
</body>
</html>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
nav{
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 75px;
background: #2980b9;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
nav .navbar{
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
max-width: 90%;
background: #2980b9;
margin: auto;
}
nav .navbar .logo a{
color: #fff;
font-size: 27px;
font-weight: 600;
text-decoration: none;
}
nav .navbar .menu{
display: flex;
}
.navbar .menu li{
list-style: none;
margin: 0 15px;
}
.navbar .menu li a{
color: #fff;
font-size: 17px;
font-weight: 500;
text-decoration: none;
}
section{
display: flex;
height: 100vh;
width: 100%;
align-items: center;
justify-content: center;
color: #96c7e8;
font-size: 70px;
}
#Home{
background: #fff;
}
#About{
background: #f2f2f2;
}
#Category{
background: #e6e6e6;
}
#Latest{
background: #fff;
}
#Contact{
background: #f2f2f2;
}
#Feedback{
background: #e6e6e6;
}
.button a{
position: fixed;
bottom: 20px;
right: 20px;
color: #fff;
background: #2980b9;
padding: 7px 12px;;
font-size: 18px;
border-radius: 6px;
box-shadow: rgba(0, 0, 0, 0.15);
}
If you face any difficulties while creating your Navigation Bar or your code is not working as expected, you can download the source code files for this Website Navbar for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.
