Streaming live at 10am (PST)

Smooth Site Scrolling?


#1

Good day everyone.

I was wondering how this website was able to achieve their smooth scrolling effect, and if I could achieve said effect in Webflow:

Any help is appreciated.
Cheers!



#2

Sorry for the bump, but I really do require help with this. :slight_smile:


#3

Hi @Desiign,

well you could try to reverse-engineer their code to see what function they’ve used but it’s pretty hard to read and understand what’s going on… if you’re into it, try ctrl+f with keyword scroll… maybe you find something interesting in the CSS or JS files:

css
js

The scrolling looks nice indeed :slight_smile:
Let us know if you find something, I’d be interested too !

Good luck


#4

Here you go. Example in my portfolio below…

Can’t remember where I found this but it took some digging around when I wanted to know the same thing a couple years ago. I add it to all my builds along with “fastclick.js” to get rid of click delays on browsers - both add a nice little final polish.

The current settings add just a subtle little “hi-jacking” of the default janky/jumpy scrolling behavior of most browsers. Just a touch of smoothness and a tiny bit of overscroll on a quick mouse wheel movement, if you want a different feel then play around with the settings at the top of the script. You can fine tune it quite a bit…

Webflow doesn’t allow you to upload js files so you’ll need to host it elsewhere…

Then just add it as an include in the footer code of your site.

<script type="text/javascript" src="https://yourhostingservice/smoothscroll.js"></script>

Settings


Smooth Scrolling - Awwwards website
#5

@Mogeek

I’m struggling with this and would love any help you could offer.

  1. I’m not seeing the smooth scrolling on your portfolio you linked above, but I do see the smooth scrolling here

I’m trying to recreate it with your tutorial, but am really struggling - here is my share link for the project I’m trying to get it working on https://preview.webflow.com/preview/smooth-scrolling-2bbb0d?preview=b05e058de8c41b101ec7a2546b1dfce6

Thank you in advance!


#6

+1
Same thing here
Im on trackpad scroll.