scrollTop is deprecated; trying a work-around

[Meddysong]

I wondered why a feature on my site had stopped working. What's supposed to happen is you click on a link and it scrolls slowly down to it, offsetting by a few pixels to take into account that there's a header at the top of the page. But clicking the link produced no result at all.

Here's what the relevant bit of code looked like:

// Get the top
   var top = section.offset().top - parseInt( section.css('padding-top') ) - 50;

// Scroll body to it
   $('body').animate({
   scrollTop: top + 'px'
   });

It turns out that scrollTop has been deprecated from JS recently, as I found out from a video posted on YouTube last week advocating the use of documentElement.scrollTop instead. So I've rewritten the relevant bit of code as

// Get the top
   var top = section.offset().top - parseInt( section.css('padding-top') ) - 50;

// Scroll body to it
   $('body').animate({
                       documentElement.scrollTop: top + 'px'
   });

That's not much use to me, even though it scrolls because:

1) It no longer animates; it's just an immediate jump rather than a smooth scroll;

2) It doesn't respect the offset; it just jumps to where the anchor appears and loads the page with it at the very top;

3) It's appending the anchor name (mysite.com#anchor), whereas before this didn't happen.

Does anybody have any thoughts of how to restore the original behaviour?

[newbie LAC]

Revert your changes

and this

$('body')

change to 

$('html, body')

 

[Meddysong]

You're a hero -- thank you