Solution 1 :

I tested your code, extracting the JavaScript out of the HTML fixes the issue.

The error I get in the console when running your code is Cannot read property 'scrollIntoView' of null

const buttonEl = document.querySelector("#clickMe");
const scrollEl = document.querySelector("#scollToMe");

buttonEl.addEventListener("click", function () {
    behavior: "smooth"
.scroll-el {
  margin-top: 200vh;
  background: red;
  height: 50px;
  width: 100%;
<button id='clickMe' type='button'>Click me</button>
<div class='scroll-el' id='scollToMe'></div>

Solution 2 :

I found out that there is a option in Chrome to disable/enable smooth scrolling options (which i had turned to default so it didn’t work.)

To enable smooth scrolling in Chrome go to: chrome://flags/#smooth-scrolling

it all works smoothly now.

furthermore i found that there are multiple ways to scroll smoothly:

#1: in the CSS:

html, body {
  height: 100%;
  scroll-behavior: smooth;

#2: in the HTML itself

  <button type="button"
      .scrollIntoView({behavior: 'smooth'});">
Click Me!

Problem :

I have been trying out some things to get more used to web dev.

I found a cool thing; scrollIntoView(), where it it is supposed to scroll smoothly to the next id-tag.

<button type="button"
          .scrollIntoView({behavior: 'smooth'});">
    Click Me!

And this should smoothly scroll to id: projects overview in dashboard.component.html:

<div class="grid-container">
 <h1 id="projects-overview" class="mat-h1">Projects</h1>

Now this works, in a sence that it “goes” to the id, but it does not do this smoothly?

Any help/comments are really appreciated.

i made this in an Angular project, and the latest edition of Chrome

SNIPPET can be found here: FIDDLE


Comment posted by Please state the browser

Please state the browser

Comment posted by this question

(Reopened it because it is not a duplicate of

Comment posted by minimal reproducible example

Please provide more information and ideally a

Comment posted by Asons

Your fiddle works just fine, scrolling smoothly, so not much more to do here.

Comment posted by Asons

Well, that fiddle works just fine too.

Comment posted by Diorcula

Why do you make use of the eventlistener if i may ask?

Comment posted by

@Diorcula Read this regarding why to use

Comment posted by Diorcula

hi @markmead i get your point, but what do you suppose for an answer then?

Comment posted by Diorcula

@markmead okidoki, when i have some time to spare i will try to write it with unobtrusive JavaScript!