顺利滚动到锚标签

Question

我想在我的页面中设置链接，使页面的滚动（实际上不是页面，但在这种情况下为#scrollable元素）动画到目标位置。

以下内容在移动设备和桌面设备上都非常粗糙。似乎Skrollr可以帮助我。我怎么能用它来实现以下内容？

 var scrollable = $('#scrollable'); // whole page container that scrolls, not using native scroll
 var headerDownArrow = $('#header-down-arrow');

  headerDownArrow.on('click', function(){   
    scrollable.animate({
      scrollTop: $("#home-portfolio").offset().top
    }, 1000)
  });

我尝试了这个并且它不起作用（根本没有滚动），我错过了什么？

  var s = skrollr.init({
    smoothScrolling: true,
    skrollrBody: document.getElementById('scrollable')
  });

  skrollr.menu.init(s, {
    animate: true,
    easing: 'sqrt'
  });

我也试过这个，以及我在this post找到的其他变体，它看起来总是很锯齿。

$('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $scrollable.animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });

我还禁用了所有滚动事件（最终是所有JavaScript），然后是固定定位的样式和HTML元素，滚动仍然很粗糙。