jQuery なしでスムーススクロール実装するときのベストプラクティスがわからない

2016.02.05

jQuery で便利なのは offset 系の処理だと思うんだけど、 offset 系の処理で最も頻発するのはスムーススクロールだと思ってる。 とりあえず何秒かごとにターゲットの場所までちょっとずつスクロールしていくだけという雑なコードを書いているんですがうまいやり方を知りたい。スムースにすればするほど重くなってしまう。はやく scroll-behavior が全てのブラウザに搭載されてほしい

雑な上に親なき野良エンジニアなのでベストプラクティスがわかりません。 以下に雑コードを掲載しますのでこうしろとかこういう本を読めとかあったら教えて下さい 間違ってもコピペして使ったりしないでくださいネ…。

var insiteLink = document.getElementsByClassName('insiteLink');
for(var i=0;i<insiteLink.length;i++){
  insiteLink[i].addEventListener('click', function(e){
    e.preventDefault();
    var duration = 400; //何秒かけてスクロールするか
    var frame = 10; //何秒に1度スクロールするか、多いほどカクカクする
    var speed = 0; //速さです
    var href = this.getAttribute('href');
    var target = (href==='#' || href==='' ? 'html' : href.replace('#', ''));
    var targetObj = target==='html' ? document.documentElement : document.getElementById(target);
    var targetRect = targetObj.getBoundingClientRect();
    var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    var targetTop = targetRect.top + scrollTop;
    var distance = scrollTop - targetTop;
    speed = distance/duration*frame;
    smoothScroll = window.setInterval(function(){
      scrollTop = scrollTop-speed;
      window.scrollTo(0,scrollTop);
    }, frame);
    window.setTimeout(function(){
      clearInterval(smoothScroll);
    }, duration+1);
  });
}