How to add buttery smooth scrolling to a landing page

Thanks Quinn! Unfortunately this didn’t work on Chrome or Safari though. I recently purchased one of the Themeforrest landing page themes a while back and noticed that the script they used worked across all browsers.

It did need to be added after the body tag.

<script> <br /><br /> /* JavaScript for Smooth Page Scrolling */ <br /><br /> (function ($) { <br /><br />
  var self = this, container, running=false, currentY = 0, targetY = 0, oldY = 0, maxScrollTop= 0, minScrollTop, direction, onRenderCallback=null, <br />
          fricton = 0.8, // higher value for slower deceleration <br />
          vy = 0, <br />
          stepAmt = 10, <br />
          minMovement= 0.1, <br />
          ts=0.1; <br /><br />
  var updateScrollTarget = function (amt) { <br />
      targetY += amt; <br />
      vy += (targetY - oldY) * stepAmt; <br /><br />
      oldY = targetY; <br /><br />
  } <br />
  var render = function () { <br />
      if (vy < -(minMovement) || vy > minMovement) { <br /><br />
          currentY = (currentY + vy); <br />
          if (currentY > maxScrollTop) { <br />
              currentY = vy = 0; <br />
          } else if (currentY < minScrollTop) { <br />
                  vy = 0; <br />
                  currentY = minScrollTop; <br />
              } <br /><br />
          container.scrollTop(-currentY); <br /><br />
          vy *= fricton; <br /><br />
       //
vy += ts * (currentY-targetY); <br />
          // scrollTopTweened += settings.tweenSpeed * (scrollTop - scrollTopTweened); <br />
          // currentY += ts * (targetY - currentY); <br /><br />
          if(onRenderCallback){ <br />
              onRenderCallback(); <br />
          } <br />
      } <br />
  } <br />
  var animateLoop = function () { <br />
      if(! running)return; <br />
      requestAnimFrame(animateLoop); <br />
      render(); <br />
      //log("45","animateLoop","animateLoop", "",stop); <br />
  } <br />
  var onWheel = function (e) { <br />
      e.preventDefault(); <br />
      var evt = e.originalEvent; <br /><br />
      var delta = evt.detail ? evt.detail * -1 : evt.wheelDelta / 40; <br />
      var dir = delta < 0 ? -1 : 1; <br />
      if (dir != direction) { <br />
          vy = 0; <br />
          direction = dir; <br />
      } <br /><br />
      //reset currentY in case non-wheel scroll has occurred (scrollbar drag, etc.) <br />
      currentY = -container.scrollTop(); <br /><br />
      updateScrollTarget(delta); <br />
  } <br /><br />
  /* <br />
   * http://paulirish.com/2011/requestanimationframe-for-smart-animating/ <br />
   */ <br />
  window.requestAnimFrame = (function () { <br />
      return
window.requestAnimationFrame || <br />
              window.webkitRequestAnimationFrame || <br />
              window.mozRequestAnimationFrame || <br />
              window.oRequestAnimationFrame || <br />
              window.msRequestAnimationFrame || <br />
              function (callback) { <br />
                  window.setTimeout(callback, 1000 / 60); <br />
              };
<br /><br />
  })(); <br /><br />
  /* <br />
   * http://jsbin.com/iqafek/2/edit <br />
   */ <br />
  var normalizeWheelDelta = function () { <br />
      // Keep a distribution of observed values, and scale by the <br />
      // 33rd percentile. <br />
      var distribution = [], done = null, scale = 30; <br />
      return function (n) { <br />
          // Zeroes don't count. <br />
          if (n == 0) return n; <br />
          // After 500 samples, we stop sampling and keep current factor. <br />
          if (done != null) return n * done; <br />
          var abs = Math.abs(n); <br />
          // Insert value (sorted in ascending order). <br />
          outer: do { // Just used for break goto <br />
              for (var i = 0; i < distribution.length; ++i) { <br />
                  if (abs <= distribution[i]) { <br />
                      distribution.splice(i, 0, abs); <br />
                      break outer; <br />
                  } <br />
              } <br />
              distribution.push(abs); <br />
          } while (false); <br />
          // Factor is scale divided by 33rd percentile. <br />
          var factor = scale / distribution[Math.floor(distribution.length / 3)]; <br />
          if (distribution.length == 500) done = factor; <br />
          return n * factor; <br />
      }; <br />
  }(); <br /><br />
  $.fn.smoothWheel = function () { <br />
      //
var args = [].splice.call(arguments, 0); <br />
      var options = jQuery.extend({}, arguments[0]); <br />
      return this.each(function (index, elm) { <br /><br />
          if(!('ontouchstart' in window)){ <br />
              container = $(this); <br />
              container.bind("mousewheel", onWheel); <br />
              container.bind("DOMMouseScroll", onWheel); <br /><br />
              //set target/old/current Y to match current scroll position to prevent jump to top of container <br />
              targetY = oldY = container.get(0).scrollTop; <br />
              currentY = -targetY; <br /><br />
              minScrollTop = container.get(0).clientHeight - container.get(0).scrollHeight; <br />
              if(options.onRender){ <br />
                  onRenderCallback = options.onRender; <br />
              } <br />
              if(options.remove){ <br />
                  log("122","smoothWheel","remove", ""); <br />
                  running=false; <br />
                  container.unbind("mousewheel", onWheel); <br />
                  container.unbind("DOMMouseScroll", onWheel); <br />
              }else if(!running){ <br />
                  running=true; <br />
                  animateLoop(); <br />
              } <br /><br />
          } <br />
      }); <br />
  }; <br /><br /> })(jQuery); <br /><br /> $(function(){ <br /><br />
if($.browser.webkit){ <br />
  $("body").smoothWheel(); <br />
} <br /><br /> }); <br /> </script>   

It doesn’t work for me 😦

Hello

i think here is your solution : How to add smooth scroll into unbounce