Building a Smooth Scrolling One-Page Website with JavaScript and CSS

Building a Smooth Scrolling One-Page Website with JavaScript and CSS

One-page websites with smooth scrolling navigation have become increasingly popular due to their simple yet engaging design. In this tutorial, we'll walk you through building a one-page website with smooth scrolling navigation using vanilla JavaScript and CSS. We'll create the HTML structure, style the sections, and implement the smooth scrolling effect.

1. Create the HTML Structure

Start by setting up the basic HTML structure for the one-page website:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Smooth Scrolling One-Page Website</title>
  7. <link rel="stylesheet" href="styles.css">
  8. </head>
  9. <body>
  10. <header>
  11. <nav>
  12. <ul>
  13. <li><a href="#home" class="nav-link">Home</a></li>
  14. <li><a href="#services" class="nav-link">Services</a></li>
  15. <li><a href="#portfolio" class="nav-link">Portfolio</a></li>
  16. <li><a href="#contact" class="nav-link">Contact</a></li>
  17. </ul>
  18. </nav>
  19. </header>
  20.  
  21. <main>
  22. <section id="home">Home</section>
  23. <section id="services">Services</section>
  24. <section id="portfolio">Portfolio</section>
  25. <section id="contact">Contact</section>
  26. </main>
  27.  
  28. <script src="smoothscroll.js"></script>
  29. </body>
  30. </html>

The above HTML code sets up a basic one-page website with a header containing the navigation and four sections representing different parts of the website.

2. Style the Sections and Navigation with CSS

Next, create a styles.css file and add the following styles to create a simple, clean layout for the one-page website:

  1. * {
  2. margin: 0;
  3. padding: 0;
  4. box-sizing: border-box;
  5. }
  6.  
  7. body {
  8. font-family: Arial, sans-serif;
  9. }
  10.  
  11. header {
  12. position: fixed;
  13. top: 0;
  14. left: 0;
  15. width: 100%;
  16. background-color: #333;
  17. padding: 1rem 0;
  18. z-index: 1000;
  19. }
  20.  
  21. nav ul {
  22. display: flex;
  23. list-style-type: none;
  24. justify-content: center;
  25. }
  26.  
  27. nav a {
  28. display: block;
  29. padding: 0.5rem 1rem;
  30. color: #fff;
  31. text-decoration: none;
  32. }
  33.  
  34. nav a:hover {
  35. background-color: #555;
  36. }
  37.  
  38. section {
  39. min-height: 100vh;
  40. display: flex;
  41. justify-content: center;
  42. align-items: center;
  43. font-size: 2rem;
  44. }
  45.  
  46. #services {
  47. background-color: #f0f0f0;
  48. }
  49.  
  50. #portfolio {
  51. background-color: #e0e0e0;
  52. }
  53.  
  54. #contact {
  55. background-color: #d0d0d0;
  56. }

These styles create a fixed header with a horizontal navigation menu and style the sections with alternating background colors.

3. Implement the Smooth Scrolling Effect with JavaScript

Now, create a `smoothscroll.js` file and add the following code to implement the smooth scrolling effect:

  1. document.addEventListener("DOMContentLoaded", function () {
  2. // Select all nav links
  3. const navLinks = document.querySelectorAll(".nav-link");
  4.  
  5. // Add event listeners to nav links
  6. navLinks.forEach(link => {
  7. link.addEventListener("click", event => {
  8. event.preventDefault();
  9.  
  10. // Get the target section
  11. const targetId = event.target.getAttribute("href");
  12. const targetSection = document.querySelector(targetId);
  13.  
  14. // Calculate the scroll position
  15. const headerOffset = document.querySelector("header").offsetHeight;
  16. const targetPosition = targetSection.getBoundingClientRect().top - headerOffset;
  17.  
  18. // Animate the scroll
  19. window.scrollBy({
  20. top: targetPosition,
  21. left: 0,
  22. behavior: "smooth",
  23. });
  24. });
  25. });
  26. });

This JavaScript code adds click event listeners to the navigation links, calculates the scroll position of the target section, and animates the scroll using the `scrollBy` method with the `behavior` option set to `«smooth»`.

4. Conclusion

You have now successfully created a smooth scrolling one-page website using vanilla JavaScript, HTML, and CSS. This engaging and modern design can be easily customized to match your design preferences and content requirements.

With a solid understanding of HTML, CSS, and JavaScript, you can continue to build upon this foundation to create even more complex and interactive web components. Keep experimenting and expanding your skills to become a more proficient web developer.

We use cookies to improve your browsing experience. By continuing to use this website, you consent to our use of cookies. Learn More