PHPFixing
  • Privacy Policy
  • TOS
  • Ask Question
  • Contact Us
  • Home
  • PHP
  • Programming
  • SQL Injection
  • Web3.0

Saturday, November 19, 2022

[FIXED] How to offset smooth-scroll to account for height of static navbar?

 November 19, 2022     bootstrap-4, html, javascript, twitter-bootstrap     No comments   

Issue

I am currently using Bootstrap for my website.

I am using the navbar from Bootstrap, and each of my HTML section tags has an id (ex: #about-section, #contact-section)

This allows me to use anchor tags like href="#about-section" for smooth scrolling to any section.

This works wonderfully, however once I introduced my navbar to be static, whenever I click on a navigation link that is supposed to smooth scroll me to the section, it smooth scrolls but the navbar covers a big portion of the section.

I have seen solutions but that use jQuery. What is the native JS way of doing this?


Solution

I can tell you two ways to solve this issue. Way 1 is easy with CSS and way 2 is with javascript.

Way 1: padding-top

Use padding-top to your section. The value of padding-top will the amount of height of the navbar. So when the scroll occurs to that section, actually it will start from the top. But for padding-top you can see the section after the navbar.

Way 2: Javascript

const links = document.querySelectorAll(".nav-link"); // or any other selector what you want

for (const link of links) {
  link.addEventListener("click", scrollToSection);
}

function scrollToSection(e) {
  e.preventDefault();
  const href = this.getAttribute("href");
  const offsetTop = document.querySelector(href).offsetTop;
  const navbarHeight = document.querySelector(".navbar").offsetHeight

  scroll({
    top: offsetTop - navbarHeight,
    behavior: "smooth"
  });
}


Answered By - Asif Jalil
Answer Checked By - Candace Johnson (PHPFixing Volunteer)
  • Share This:  
  •  Facebook
  •  Twitter
  •  Stumble
  •  Digg
Newer Post Older Post Home

0 Comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Total Pageviews

Featured Post

Why Learn PHP Programming

Why Learn PHP Programming A widely-used open source scripting language PHP is one of the most popular programming languages in the world. It...

Subscribe To

Posts
Atom
Posts
Comments
Atom
Comments

Copyright © PHPFixing