Hi there - if you’re looking to add smoother scrolling, the script in this StackOverflow post should work: http://stackoverflow.com/questions/14…

You’ll just need to add script tags around it and change #content to #lp-pom-root:

$(document).ready(function() { <br />

  var page = $('#lp-pom-root');

// set to the main content of the page

 <br />

  $(window).mousewheel(function(event, delta, deltaX, deltaY){ <br />

      if (delta < 0) page.scrollTop(page.scrollTop() + 65); <br />

      else if (delta > 0) page.scrollTop(page.scrollTop() - 65); <br />

      return false; <br />

  }) <br /> }); <br /> </script>   

And then add it to Javascripts panel on your page, with the placement set to “head”. We have a quick guide to adding custom Javascript to your page here: http://support.unbounce.com/entries/5…

Alternately, if you have a different smooth scrolling Javascript/jQuery script you’d like to use, the installation will be more or less the same.

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 <= distributionoi]) { <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 / distributionoMath.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({}, argumentst0]); <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>   

Thanks for sharing this! I gave it a test on a few personal pages and it appears to work across most major browsers (safari/chrome/firefox). I didn’t get a chance to try it in IE, but I suspect it should work fine. Very slick effect, too!

Have you tried A/B testing this against a standard-scroll landing page? I’d be curious to see what one converts better!

It doesn’t work for me 😦

Hi Kenji - which script did you use? The first one I posted didn’t seem to work across al browsers, but the second one in this thread should (you’ll need to place it either after the opening body tag or before the end body tag, not in the head).

If you’ve already tried that second script and it’s not working for you, can you shoot us an email at support@unbounce.com with a link to the page you have the script on?

Hello

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

None worked for me