按锚点链接后向下滚动页面

This question was placed and answer here: How to scroll page down after anchor navigation?

some years ago... I'm trying to use it but it does not work. The "localidades" anchor still moves to under the navbar and not below it. What am I missing?

Below is my code (Joomla 3.9.5):

Any help from anyone, please?

<div id="navbar">
  <a href="<?php echo $arturl; ?>#localidades">Localidades</a>
  <a href="<?php echo $arturl; ?>#informacoes">Informações</a>
  <a href="<?php echo $arturl; ?>#destaques">Destaques</a>
  <a href="<?php echo $arturl; ?>#temas">Temas</a>
</div>

<?php $document = JFactory::getDocument();
$document->addScriptDeclaration('
$(\'a\').click(function(){
    var height= $("#navbar").outerHeight();
    var pos = $($(this).attr("href")).position().top;
    $("body").scrollTop(pos - height);
    return false;
})
'); ?>

<section id="localidades">
...
</section>

Fernando