Smooth scroll behaving strangely in chrome

JavaScript
1

Hi Campers,

I am using the following code to make an element scroll to another element when clicked:

document.getElementById("top-button").addEventListener('click', function(){
    document.getElementById('landing-section').scrollIntoView({ 
        block: 'start',
        behavior: 'smooth' 
      });

in Firefox it scrolls so the top of the page is at the top of the target element (this is what I want), but in chrome it goes somewhere in the middle. I added the “block: ‘start’” option to scrollIntoView’s options parameter but it still doesn’t go to the top. Any ideas why this might be?

here is the live site:
https://mike-silverman.com/

The “About” and “Projects” buttons at the top are the buttons I am having troubles with.

Here is the github repo:

2

CSS also supports smooth scroll. Try and see if it’s better.

1 Like
3

Thank you for the suggestion. I gave it a try and the CSS version does work in Firefox, but in chrome it just instantly scrolls to the link. In MDN it says that experimental web platform features must be enabled in chrome for it to be compatible.

EDIT: I just went back to my original settings (before changing it to the CSS version) and now it is working perfectly. I am not sure why. My best idea is that chrome doesn’t sometimes hard refresh and my changes to the JS about “block:‘start’” had not been properly updated in the version of the page that chrome was showing.

4

better to use jquery based smooth scroll search via stackoverflow.