[Outdated] Smooth scroll to the proper position

Below is better answer which uses scroll-margin and scroll-padding CSS rules. getBoundingClientRect in this solution triggers additional forced layout and may cause 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'});