scrollIntoView Scrolls just too far

by

Smooth scroll to the proper position (Outdated)

There is the better answer which uses scroll-margin and scroll-padding css rules. getBoundingClientRect in this solution triggers additional forced layout and may cause unnecessary performance issues.

Get correct y coordinate and use window.scrollTo({top: y, behavior: 'smooth'})

const id = 'profilePhoto';
const yOffset = -10; 
const element = document.getElementById(id);
const y = element.getBoundingClientRect().top + window.pageYOffset + yOffset;

window.scrollTo({top: y, behavior: 'smooth'});

More Related Contents:

  1. How to pass arguments to addEventListener listener function?
  2. Remove all child elements of a DOM node in JavaScript
  3. Changing website favicon dynamically
  4. Dynamically set value of a file input [duplicate]
  5. What is the difference between children and childNodes in JavaScript?
  6. How to append text to a “?
  7. Difference between “change” and “input” event for an `input` element
  8. Setting innerHTML vs. setting value with Javascript
  9. What is my script src URL?
  10. javascript access parent DOM across domains?
  11. How to add/remove a class in JavaScript?
  12. How to make div fixed after you scroll to that div?
  13. jQuery: how to change tag name?
  14. Why is the loop assigning a reference of the last index element to? [duplicate]
  15. Get the string representation of a DOM node
  16. How can I remove all CSS classes using jQuery/JavaScript?
  17. Count immediate child div elements using jQuery
  18. Add elements to the DOM given plain text HTML using only pure JavaScript (no jQuery)
  19. JavaScript: How to get parent element by selector?
  20. Screen Scraping from a web page with a lot of Javascript [closed]
  21. What is better, appending new elements via DOM functions, or appending strings with HTML tags?
  22. How to determine scroll direction without actually scrolling
  23. Attach event listener through javascript to radio button
  24. Check whether HTML element has scrollbars
  25. Why is React’s concept of Virtual DOM said to be more performant than dirty model checking?
  26. Convert String to XML Document in JavaScript
  27. Why doesn’t Node.js have a native DOM?
  28. What’s the difference between a jQuery object and a DOM element? Difference between .get() and .index()?
  29. In web browsers, what’s the difference between onblur and onfocusout?
  30. Create a table in SVG

Leave a Comment