Navigation Bar With Page Scroll To Every Section

Navigation Bar With Page Scroll To Every Section | Free Source Code

by Letscode - december 1,2023

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.

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.

HTML

                        
<!DOCTYPE html>
<!-- Codeing By Letscodeweb  -->
<html lang="en" dir="ltr">

<head>
  <meta charset="UTF-8" />
  <title>Navigation Bar HTML CSS | Letscodeweb</title>
  <link rel="stylesheet" href="style.css" />
  <!-- Fontawesome CDN Link -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/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="#">Letscodeweb</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="fa-solid fa-arrow-up"></i></a>
  </div>
</body>

</html>

CSS

                        
/* Google Font CDN Link */
@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;
  scroll-behavior: smooth;
}


nav {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 75px;
  background: #867070;
  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: #867070;
  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;
  font-size: 70px;
  color: #000;
}

#Home {
  background: #EF9595;
}

#About {
  background: #B0D9B1;
}

#Category {
  background: #9E9FA5;
}

#Latest {
  background: #85A389;
}

#Contact {
  background: #8294C4;
}

#Feedback {
  background: #804674;
}

.button a {
  position: fixed;
  bottom: 20px;
  right: 20px;
  color: #fff;
  background: #867070;
  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.

Navigation Bar With Page Scroll To Every Section | Free Source Code

by Letscode - december 1,2023

Q: How To Scroll to a particular div position when clicking on a link from another page?

Navigation Bar With Page Scroll To Every Section | Free Source Code

Letscode - October 20,2023

Letscode - October 4,2023

Letscode - October 10,2023

Letscode - November 4,2023

Letscode - October 24,2023