Finds an element using an id or a css class and smoothly scrolls to that element. Duration of the animation depends on scroll position. Based off of a stackoverflow answer by bfred.it at http://stackoverflow.com/questions/21474678/scrolltop-animation-without-jquery . NOTE: This only works for scrolling "up" to an element at the moment. The extra…

gistfile1.txt

  var scrollTo = function(id, cls, offset) {
      var ele;
      var targetOffset = 0;
      var targetTop = 0;

      if(offset) {
          targetOffset = offset;
      }
      if(id) {
          ele = document.getElementById(id);
      } else if(cls) {
          ele = document.getElementsByClassName(cls)[0];
      }
      if(ele) {
          targetTop = -ele.getBoundingClientRect().top + targetOffset;
      }

      var scrollHeight = window.scrollY;
      var targetY = scrollHeight - targetTop;
      // The sqrt is to move the duration closer to 1000ms
      var scrollStep = Math.PI / ((Math.sqrt(targetTop / 1000) * 1000) / 15);
      var cosParameter = targetTop / 2;
      var scrollCount = 0;
      var scrollMargin;
      window.requestAnimationFrame(step);

      function step() {
          setTimeout(function() {
              if(window.scrollY > targetY) {
                  requestAnimationFrame(step);
                  scrollCount = scrollCount + 1;
                  scrollMargin = cosParameter - cosParameter * Math.cos(scrollCount * scrollStep);
                  window.scrollTo(0, (scrollHeight - scrollMargin));
              }
          }, 5);
      }
  };