Плавный скроллинг к элементу JS

Например через animate

$('html, body').animate({
    scrollTop: $('#elementId').offset().top - 200 //Смещение, например если на верху fixed меню
}, 500);

а по прямой ссылке с якорем не выйдет. Страница сразу спозиционируется на якоре

У меня получилось

Ссылки

  <ul>
        <li>
            <a  href="#news">Новости</a>
        </li>
        <li>
            <a href="/#shops">Магазины</a>
        </li>
    </ul>

Страницы

 <div id="news">
       ...
  </div>
  <div id="shops">
       ...
  </div>

JS

  $(document).ready(function () {
        $(".nav-side-menu").on("click", "a", function () {
            if(jQuery(this).attr("href")=="/#shops"){
                $('html, body').animate({
                    scrollTop: $('#shops').offset().top - 200
                }, 500); 
            }else if(!(jQuery(this).attr("href")=="/#shops")){
                var id = $(this).attr('href'),
                    top = $(id).offset().top;
                $('body,html').animate({ scrollTop: top }, 500);
            }
        });
    });