Smooth scrolling w/o custom code (See example)

Community resources Product feedback
1

Hi! I have been exploring around many portfolio website built in Webflow, and found this site. Amazing creative director’s website. Love all of his works.

I think this site isn’t built in advanced plan. I guess it is the basic plan(Basic plan doesn’t allow the custom code), but still has smooth scrolling. Any body know the crack how to build smooth scrolling without custom code?

2

Lots of custom code…
He has this-

  if (window.addEventListener) window.addEventListener('DOMMouseScroll', wheel, false);
window.onmousewheel = document.onmousewheel = wheel;

function wheel(event) {
    var delta = 0;
    if (event.wheelDelta) delta = event.wheelDelta / 40; //controls the scroll wheel range/speed
    else if (event.detail) delta = -event.detail / 40;

    handle(delta);
    if (event.preventDefault) event.preventDefault();
    event.returnValue = false;
}

var goUp = true;
var end = null;
var interval = null;

function handle(delta) {
var animationInterval = 20; //controls the scroll animation after scroll is done
  var scrollSpeed = 20; //controls the scroll animation after scroll is done

if (end == null) {
  end = $(window).scrollTop();
  }
  end -= 20 * delta;
  goUp = delta > 0;

  if (interval == null) {
    interval = setInterval(function () {
      var scrollTop = $(window).scrollTop();
      var step = Math.round((end - scrollTop) / scrollSpeed);
      if (scrollTop <= 0 || 
          scrollTop >= $(window).prop("scrollHeight") - $(window).height() ||
          goUp && step > -1 || 
          !goUp && step < 1 ) {
        clearInterval(interval);
        interval = null;
        end = null;
      }
      $(window).scrollTop(scrollTop + step );
    }, animationInterval);
  }
}
1 Like
3

Oh I see. it has ‘webflow’ badge right bottom, so I thought he doesn’t use. haha! THANKS!!

4

How can we go about adding smooth scrolling. Would it be this code that we would want to embed? If so where does it get added? Tried to embed, but said it was invalid.

5

Take a look at this topic >

2 Likes