HTML Scrolling to section doesn't scroll all the way down

Question

I want my buttons on my navbar to scroll to a certain section, but it doesn't scroll all the way down, and it scrolls to the most top of the section instead. I've done a lot of research regarding scroll behavior in HTML and CSS, but nothing on Google seems to solve my problem. I'm also looking for a solution without and JavaScript required. Here is a quick JSFiddle demo.

* {
  color: white;
}

body,
html {
  background: #313131;
  min-height: 100vh;
}

.cover {
  /* background: url(bg.svg) no-repeat center center fixed;  */
  background-color: #313131;
  background-size: cover;
  color: white;
  padding-left: 2.5vw;
  height: 100%;
  width: 100%;
}

.mainnavbar {
  background: #313131b6
}

.textleft {
  text-align: left;
}

.header {
  font-size: xx-large;
  max-width: 700px;
  margin-top: 40vh;
}

.footer {
  font-size: small;
  margin-bottom: 40vh;
}

.cover {
  background: #313131
}

<nav class="nav nav-pills nav-justified d-flex justify-content-center py-3 px-3 fixed-top mainnavbar" id="navbar">
  <li class="nav-item"><a href="#features" class="nav-link">Features</a></li>
  <li class="nav-item"><a href="#pricing" class="nav-link">Pricing</a></li>
  <li class="nav-item"><a href="#faqs" class="nav-link">FAQs</a></li>
  <li class="nav-item"><a href="#servers" class="nav-link">Servers</a></li>
  <li class="nav-item"><a href="#about" class="nav-link">About</a></li>
</nav>
<div class="cover d-flex aligns-items-center">
  <div class="textleft">
    <h1 class="header align-middle">Hello! Welcome to my site.</h1>
    <p class="footer align-middle">Proudly made by talented people at GoTeam.</p>
  </div>
</div>
<div class="container scrollable" data-bs-spy="scroll" data-bs-target="#navbar" data-bs-smooth-scroll="true" data-bs-offset="150">
  <hr>
  <h2 class="text-center">Features</h2>
  <p id="features">Hello! I am making a quite long, yet information-dense placeholder text, so we can see how the scrolling behaviour when clicking a button works. Hello! I am making a quite long, yet information-dense placeholder text, so we can see how the scrolling
    behaviour when clicking a button works. Hello! I am making a quite long, yet information-dense placeholder text, so we can see how the scrolling behaviour when clicking a button works. Hello! I am making a quite long, yet information-dense placeholder
    text, so we can see how the scrolling behaviour when clicking a button works. Hello! I am making a quite long, yet information-dense placeholder text, so we can see how the scrolling behaviour when clicking a button works.</p>
  <hr>
  <h2 class="text-center">Pricing</h2>
  <p id="pricing">Hello! I am making a quite long, yet information-dense placeholder text, so we can see how the scrolling behaviour when clicking a button works. Hello! I am making a quite long, yet information-dense placeholder text, so we can see how the scrolling
    behaviour when clicking a button works. Hello! I am making a quite long, yet information-dense placeholder text, so we can see how the scrolling behaviour when clicking a button works. Hello! I am making a quite long, yet information-dense placeholder
    text, so we can see how the scrolling behaviour when clicking a button works. Hello! I am making a quite long, yet information-dense placeholder text, so we can see how the scrolling behaviour when clicking a button works.</p>
  <hr>
  <h2 class="text-center">FAQs</h2>
  <p id="faqs">Hello! I am making a quite long, yet information-dense placeholder text, so we can see how the scrolling behaviour when clicking a button works. Hello! I am making a quite long, yet information-dense placeholder text, so we can see how the scrolling
    behaviour when clicking a button works. Hello! I am making a quite long, yet information-dense placeholder text, so we can see how the scrolling behaviour when clicking a button works. Hello! I am making a quite long, yet information-dense placeholder
    text, so we can see how the scrolling behaviour when clicking a button works. Hello! I am making a quite long, yet information-dense placeholder text, so we can see how the scrolling behaviour when clicking a button works.</p>
  <hr>
  <h2 class="text-center">Servers</h2>
  <p id="servers">Hello! I am making a quite long, yet information-dense placeholder text, so we can see how the scrolling behaviour when clicking a button works. Hello! I am making a quite long, yet information-dense placeholder text, so we can see how the scrolling
    behaviour when clicking a button works. Hello! I am making a quite long, yet information-dense placeholder text, so we can see how the scrolling behaviour when clicking a button works. Hello! I am making a quite long, yet information-dense placeholder
    text, so we can see how the scrolling behaviour when clicking a button works. Hello! I am making a quite long, yet information-dense placeholder text, so we can see how the scrolling behaviour when clicking a button works.</p>
  <hr>
  <h2 class="text-center">About</h2>
  <p id="about">Hello! I am making a quite long, yet information-dense placeholder text, so we can see how the scrolling behaviour when clicking a button works. Hello! I am making a quite long, yet information-dense placeholder text, so we can see how the scrolling
    behaviour when clicking a button works. Hello! I am making a quite long, yet information-dense placeholder text, so we can see how the scrolling behaviour when clicking a button works. Hello! I am making a quite long, yet information-dense placeholder
    text, so we can see how the scrolling behaviour when clicking a button works. Hello! I am making a quite long, yet information-dense placeholder text, so we can see how the scrolling behaviour when clicking a button works.</p>
</div>

if you have done a lot of research then you should have come across the only possible solution: scroll-offset which requires JS. Where is you JS attempt for a scroll offset and where are you stuck? — tacoshy, Aug 14 '22 at 13:03
@tacoshy Hi, I can't find any documentations about "scroll-offset". Can you point me to one? — Joystickedits, Aug 14 '22 at 13:09
@tacoshy I'm looking for a solution without using JS. Is that possible? — Joystickedits, Aug 14 '22 at 13:15
You can try to hack it with a negative margin like `*:target { margin-top: -x }` however, that can cause some nasty collisions. That's why you actually need JS for it. — tacoshy, Aug 14 '22 at 13:17

score 0 · Answer 1 · answered Aug 14 '22 at 13:31

Because I don't want my HTML look bad, I used JavaScript to do it. Here's the updated button

<li class="nav-item"><button onclick='scrollto("features")' class="nav-link">Features</button></li>

And the function

function scrollto(id){
        var element = document.getElementById(id);
        var headerOffset = 125;
        var elementPosition = element.getBoundingClientRect().top;
        var offsetPosition = elementPosition + window.pageYOffset - headerOffset;
    
        window.scrollTo({
            top: offsetPosition,
            behavior: "smooth"
        });
    }

(i just copied it from another question)

ℛɑƒæĿᴿᴹᴿ · Answer 2 · 2022-08-14T14:20:01.930

Simple example using pure javascript with function scrollIntoView.

You can customise some properties:

behavior: Defines the transition animation. One of auto or smooth.
- Defaults to auto
block: Defines vertical alignment. One of start, center, end, or nearest
- Defaults to start
inline: Defines horizontal alignment. One of start, center, end, or nearest.
- Defaults to nearest

function scrollToId(elem) {
  const element = document.getElementById(elem);
  element.scrollIntoView({
    block: "center",
    inline: "nearest",
    behavior: "smooth"
  });
}

* {
  color: white;
}

body,
html {
  background: #313131;
  min-height: 100vh;
}

.cover {
  /* background: url(bg.svg) no-repeat center center fixed;  */
  background-color: #313131;
  background-size: cover;
  color: white;
  padding-left: 2.5vw;
  height: 100%;
  width: 100%;
}

.mainnavbar {
  background: #313131b6
}

.textleft {
  text-align: left;
}

.header {
  font-size: xx-large;
  max-width: 700px;
  margin-top: 40vh;
}

.footer {
  font-size: small;
  margin-bottom: 40vh;
}

.cover {
  background: #313131
}

<nav class="nav nav-pills nav-justified d-flex justify-content-center py-3 px-3 fixed-top mainnavbar" id="navbar">
  <li class="nav-item" onClick="scrollToId('features')">Features</li>
  <li class="nav-item" onClick="scrollToId('pricing')">Pricing</li>
  <li class="nav-item" onClick="scrollToId('faqs')">FAQs</li>
  <li class="nav-item" onClick="scrollToId('servers')">Servers</li>
  <li class="nav-item" onClick="scrollToId('about')">About</li>
</nav>
<div class="cover d-flex aligns-items-center">
  <div class="textleft">
    <h1 class="header align-middle">Hello! Welcome to my site.</h1>
    <p class="footer align-middle">Proudly made by talented people at GoTeam.</p>
  </div>
</div>
<div class="container scrollable" data-bs-spy="scroll" data-bs-target="#navbar" data-bs-smooth-scroll="true" data-bs-offset="150">
  <hr>
  <h2 class="text-center">Features</h2>
  <p id="features">Hello! I am making a quite long, yet information-dense placeholder text, so we can see how the scrolling behaviour when clicking a button works. Hello! I am making a quite long, yet information-dense placeholder text, so we can see how the scrolling
    behaviour when clicking a button works. Hello! I am making a quite long, yet information-dense placeholder text, so we can see how the scrolling behaviour when clicking a button works. Hello! I am making a quite long, yet information-dense placeholder
    text, so we can see how the scrolling behaviour when clicking a button works. Hello! I am making a quite long, yet information-dense placeholder text, so we can see how the scrolling behaviour when clicking a button works.</p>
  <hr>
  <h2 class="text-center">Pricing</h2>
  <p id="pricing">Hello! I am making a quite long, yet information-dense placeholder text, so we can see how the scrolling behaviour when clicking a button works. Hello! I am making a quite long, yet information-dense placeholder text, so we can see how the scrolling
    behaviour when clicking a button works. Hello! I am making a quite long, yet information-dense placeholder text, so we can see how the scrolling behaviour when clicking a button works. Hello! I am making a quite long, yet information-dense placeholder
    text, so we can see how the scrolling behaviour when clicking a button works. Hello! I am making a quite long, yet information-dense placeholder text, so we can see how the scrolling behaviour when clicking a button works.</p>
  <hr>
  <h2 class="text-center">FAQs</h2>
  <p id="faqs">Hello! I am making a quite long, yet information-dense placeholder text, so we can see how the scrolling behaviour when clicking a button works. Hello! I am making a quite long, yet information-dense placeholder text, so we can see how the scrolling
    behaviour when clicking a button works. Hello! I am making a quite long, yet information-dense placeholder text, so we can see how the scrolling behaviour when clicking a button works. Hello! I am making a quite long, yet information-dense placeholder
    text, so we can see how the scrolling behaviour when clicking a button works. Hello! I am making a quite long, yet information-dense placeholder text, so we can see how the scrolling behaviour when clicking a button works.</p>
  <hr>
  <h2 class="text-center">Servers</h2>
  <p id="servers">Hello! I am making a quite long, yet information-dense placeholder text, so we can see how the scrolling behaviour when clicking a button works. Hello! I am making a quite long, yet information-dense placeholder text, so we can see how the scrolling
    behaviour when clicking a button works. Hello! I am making a quite long, yet information-dense placeholder text, so we can see how the scrolling behaviour when clicking a button works. Hello! I am making a quite long, yet information-dense placeholder
    text, so we can see how the scrolling behaviour when clicking a button works. Hello! I am making a quite long, yet information-dense placeholder text, so we can see how the scrolling behaviour when clicking a button works.</p>
  <hr>
  <h2 class="text-center">About</h2>
  <p id="about">Hello! I am making a quite long, yet information-dense placeholder text, so we can see how the scrolling behaviour when clicking a button works. Hello! I am making a quite long, yet information-dense placeholder text, so we can see how the scrolling
    behaviour when clicking a button works. Hello! I am making a quite long, yet information-dense placeholder text, so we can see how the scrolling behaviour when clicking a button works. Hello! I am making a quite long, yet information-dense placeholder
    text, so we can see how the scrolling behaviour when clicking a button works. Hello! I am making a quite long, yet information-dense placeholder text, so we can see how the scrolling behaviour when clicking a button works.</p>
</div>

Reference:

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

HTML Scrolling to section doesn't scroll all the way down

2 Answers2

Reference: