How to create reusable function with alternating if statements
<p>I am creating a smooth scrolling and a bounce (at top and bottom) effect. (After a full day of trial and error,) I was able to successfully implement it. I'm now having trouble finding a method to have reusable clean code. (I think that's called an algorithm?)</p>

<p>The specific problem I'm having, is alternating between <code>&lt;=</code> and <code>&gt;=</code>. The code overall can use some clean up, which I did to the best of my ability, but I think it needs some more (let me know if it doesn't).</p>

<p>So in reusable <code>function</code>, like this:</p>

<pre><code>function reusableFunction() {
    ...
    if (num1 &gt;= num2) // One case I have to compare like this
    if (num1 &lt;= num2) // Another case, I have to compare like this
    ...
}
</code></pre>

<p>I got stuck at line #86 in the <code>function bounceBack</code>. If you have a better way of making the smooth scrolling, and bouncing effect, please post as an answer. I don't want to use any librarys, or other frameworks (like JQuery).</p>

<p><a href="https://jsfiddle.net/bsr1curo/" rel="nofollow"><h3>JSFiddle</h3></a></p>

<p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-js lang-js prettyprint-override"><code>console.clear();

var innerWrapper = document.getElementById('innerWrapper');
innerWrapper.addEventListener('mousewheel', handleScroll);
innerWrapper.style.transform = 'translate3d(0px, 0px, 0px)';

var interval, // scroll is being eased
  mult = 0, // how fast do we scroll
  dir = 0, // 1 = scroll down, -1 = scroll up
  steps = 50, // how many steps in animation
  length = 30; // how long to animate

var bouncePadding = 30;

function handleScroll(e) {
  e.preventDefault();
  clearInterval(interval); // cancel previous animation
  ++mult; // we are going to scroll faster
  var delta = -Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
  if (dir != delta) { // scroll direction changed
    mult = 1; // start slowly
    dir = delta;
  }
  var start = parseInt(innerWrapper.style.transform.split(',')[1], 10); // Get x from translate3d
  var end = start + length * mult * delta; // where to end the scroll
  var change = end - start; // base change in one step
  var step = 0; // current step
  var scrolledToBottom = innerWrapper.scrollHeight - innerWrapper.parentElement.offsetHeight;
  var tempVar;

  interval = setInterval(function() {
    var scrollPosition = easeOut(step++, start, -change, steps);
    scrollPosition = clamp(scrollPosition, -scrolledToBottom - bouncePadding, 0 + bouncePadding);
    innerWrapper.style.transform = 'translate3d(0px, ' + scrollPosition + 'px, 0px)';
    if (tempVar === scrollPosition) {
      step = steps;
    } else {
      tempVar = scrollPosition
    }

    if (step &gt;= steps) { // scroll finished without speed up - stop by easing out
      endScrollCallback();

      if (scrollPosition &gt; 0 &amp;&amp; dir === -1) {
        step = 0;
        var myInterval = setInterval(function() {
          var scrollPos = easeOut(step++, scrollPosition, -scrollPosition, 15);
          innerWrapper.style.transform = 'translate3d(0px, ' + (scrollPos) + 'px, 0px)';

          if (scrollPos &lt;= 0) {
            clearInterval(myInterval);
            innerWrapper.style.transform = 'translate3d(0px, ' + (0) + 'px, 0px)';
          }
        }, 10);
      } else if (scrollPosition &lt; -scrolledToBottom &amp;&amp; dir === 1) {
        step = 0;
        var myInterval = setInterval(function() {
          var change = -scrolledToBottom - scrollPosition;
          var scrollPos = easeOut(step++, scrollPosition, change, 15);
          innerWrapper.style.transform = 'translate3d(0px, ' + (scrollPos) + 'px, 0px)';

          if (scrollPos &gt;= -scrolledToBottom) {
            clearInterval(myInterval);
            innerWrapper.style.transform = 'translate3d(0px, ' + (-scrolledToBottom) + 'px, 0px)';
          }
        }, 10);
      }
    }
  }, 10);
}

function easeOut(t, b, c, d) {
  t /= d;
  return -c * t * (t - 2) + b;
}

function endScrollCallback() {
  mult = 0;
  clearInterval(interval);
}

function bounceBack(from, to, difference) {
  var step = 0;
  var interval = setInterval(function() {
    var scrollPos = outQuartic(step++, from, difference, 15);
    innerWrapper.style.transform = 'translate3d(0px, ' + (scrollPos) + 'px, 0px)';
    if (scrollPos &lt;= 0) { /* Got stuck here */
      clearInterval(interval);
      innerWrapper.style.transform = 'translate3d(0px, ' + to + 'px, 0px)';
    }
  }, 10);
}

function clamp(val, min, max) {
  if (typeof min !== 'number') min = 0;
  if (typeof max !== 'number') max = 1;
  return Math.min(Math.max(val, min), max);
}</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>body {} #outerWrapper {
  width: 500px;
  height: 400px;
  overflow: hidden;
  background-color: black;
}
#content {
  background-image: url("http://images.freeimages.com/images/premium/previews/3037/30376024-beautiful-flower-portrait.jpg");
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="outerWrapper"&gt;
  &lt;div id="innerWrapper"&gt;
    &lt;div id="content"&gt;
      Lorem ipsum dolor sit amet consectetuer laoreet faucibus id ut et. Consequat Ut tellus enim ante nulla molestie vitae sem interdum turpis. Fames ridiculus cursus pellentesque Vestibulum justo sem lorem neque accumsan nulla. Lacinia Suspendisse vitae libero
      sem et laoreet risus Sed condimentum Cras. Nunc massa mauris tempor dolor pulvinar justo neque dui ipsum vitae. Lacinia dui cursus pellentesque Vestibulum justo sem lorem neque accumsan nulla. Lacinia Suspendisse vitae libero sem et laoreet risus
      Sed condimentum Cras. Nunc massa mauris tempor dolor pulvinar justo neque dui ipsum vitae. Lacinia dui scelerisque Sed convallis nonummy orci Vestibulum orci tempusLorem ipsum dolor sit amet consectetuer laoreet faucibus id ut et. Consequat Ut tellus
      enim ante nulla molestie vitae sem interdum turpis. Fames ridiculus cursus pellentesque Vestibulum justo sem lorem neque accumsan nulla. Lacinia Suspendisse vitae libero sem et laoreet risus Sed condimentum Cras. Nunc massa mauris tempor dolor pulvinar
      justo neque dui ipsum vitae. Lacinia dui scelerisque Sed convallis nonummy orci Vestibulum orci tempusLorem ipsum dolor sit amet consectetuer laoreet faucibus id ut et. Consequat Ut tellus enim ante nulla molestie vitae sem interdum turpis. Fames
      ridiculus cursus pellentesque Vestibulum justo sem lorem neque accumsan nulla. Lacinia Suspendisse vitae libero sem et laoreet risus Sed condimentum Cras. Nunc massa mauris tempor dolor pulvinar justo neque dui ipsum vitae. Lacinia dui scelerisque
      Sed convallis nonummy orci Vestibulum orci tempusLorem ipsum dolor sit amet consectetuer laoreet faucibus id ut et. Consequat Ut tellus enim ante nulla molestie vitae sem interdum turpis. Fames ridiculus cursus pellentesque Vestibulum justo sem
      lorem neque accumsan nulla. Lacinia Suspendisse vitae libero sem et laoreet risus Sed condimentum Cras. Nunc massa mauris tempor dolor Lorem ipsum dolor sit amet consectetuer laoreet faucibus id ut et. Consequat Ut tellus enim ante nulla molestie
      vitae sem interdum turpis. Fames ridiculus cursus pellentesque Vestibulum justo sem lorem neque accumsan nulla. Lacinia Suspendisse vitae libero sem et laoreet risus Sed condimentum Cras. Nunc massa mauris tempor dolor pulvinar justo neque dui ipsum
      vitae. Lacinia dui scelerisque Sed convallis nonummy orci Vestibulum orci tempusLorem ipsum dolor sit amet consectetuer laoreet faucibus id ut et. Consequat Ut tellus enim ante nulla molestie vitae sem interdum turpis. Fames ridiculus cursus pellentesque
      Vestibulum justo sem lorem neque accumsan nulla. Lacinia Suspendisse vitae libero sem et laoreet risus Sed condimentum Cras. Nunc massa mauris tempor dolor pulvinar justo neque dui ipsum vitae. Lacinia dui scelerisque Sed convallis nonummy orci
      Vestibulum orci tempusLorem ipsum dolor sit amet consectetuer laoreet faucibus id ut et. Consequat Ut tellus enim ante nulla molestie vitae sem interdum turpis. Fames ridiculus cursus pellentesque Vestibulum justo sem lorem neque accumsan nulla.
      Lacinia Suspendisse vitae libero sem et laoreet risus Sed condimentum Cras. Nunc massa mauris tempor dolor pulvinar justo neque dui ipsum vitae. Lacinia dui scelerisque Sed convallis nonummy orci Vestibulum orci tempusLorem ipsum dolor sit amet
      consectetuer laoreet faucibus id ut et. Consequat Ut tellus enim ante nulla molestie vitae sem interdum turpis. Fames ridiculus cursus pellentesque Vestibulum justo sem lorem neque accumsan nulla. Lacinia Suspendisse vitae libero sem et laoreet
      risus Sed condimentum Cras. Nunc massa mauris tempor dolor pulvinar justo neque dui ipsum vitae. Lacinia dui scelerisque Sed convallis nonummy orci Vestibulum orci tempusLorem ipsum dolor sit amet consectetuer laoreet faucibus id ut et. Consequat
      Ut tellus enim ante nulla molestie vitae sem interdum turpis. Fames ridiculus cursus pellentesque Vestibulum justo sem lorem neque accumsan nulla. Lacinia Suspendisse vitae libero sem et laoreet risus Sed condimentum Cras. Nunc massa mauris tempor
      dolor
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>