CODEWITHSUNDEEP
javascript
Fernando Brandao
Fernando Brandao

Reputation: 117

How to add 20px to the top when it scrolls down

I created a button and when clicked it's scroll down to the next section of the page.

scroll(el) {
  el.scrollIntoView({ 
    behavior: 'smooth',
    block: 'start' 
  });
}
<span class="btn"><a (click)="scroll(forecast)">CheckForecast</a</span>
<div #forecast class="container-fluid">

Now, when it scrolls down, the top of the section get hided behind the fixed top navBar. I need to compensate the hight of my top navBar for it to scroll all the way down!?

Thanks guys.

Upvotes: 0

Views: 246

Answers (2)

Fernando Brandao
Fernando Brandao

Reputation: 117

This is the code that worked for me at the end:

scroll(el) {
el.scrollIntoView({
  behavior: 'smooth',
  block: 'start'});

setTimeout(() => {
window.scrollBy(0, -40);
}, 500);}

Upvotes: 1

sascha10000
sascha10000

Reputation: 1240

Beside the fact that your HTML and JS is totally wrong. Here is a solution, that you may need to fit your needs but is working and very simple:

function scrollto(elna) {
  let el = document.getElementById(elna);
  el.scrollIntoView();
}
<span class="btn"><a onclick="scrollto('forecast')">CheckForecast</a></span>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<div id="forecast" class="container-fluid">Some forecast</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

The br-tags are only there to have some space and to see any effect at all.

But to make some remarks. If you provide a snippet make sure that there aren't any syntactic errors. Your opening a-tag is missing, the keyword function is missing and you haven't included angular in your snippet.

To make it fit to angular you'll need to find out how you get the needed reference to your element. There are plenty of tutorials out there.

Upvotes: 0

Related Questions