'Noob question; Is it possible to add smooth-scroll effect after keypress event on a page?

I tried smooth-scrolling across a page with the click event and it works, also with CSS, but I tried it with keypress event but the smooth-scrolling doesn't seem to work. Here's my code-snippet;

<body>
  <div class="first-section">
  </div>
  <div id="second-section" class="second-section">
  </div>
</body>

document.addEventListener('keydown', function(e) {
  if (e.key === "ArrowDown") {
    document.querySelector('.second-section').scrollIntoView({
      behavior: 'smooth'
    });
  }
})
javascripthtml


Solution 1:[1]

Found the problem, had to add the e.preventdefault(); method to prevent the default behavior which is a straight jump to the specified section. Then the smooth scroll will come into place.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Alexander Nied

Related Questions