JS/jQuery Code - Scrolling up/down triggers event (Smooth scrolling to Div Classes)

This is my first question on Stackoverflow, so kindly excuse me if I've done something wrong (and guide me accordingly). A quick disclaimer; I'm quite new to Web Design, and have got fundamental HTML, CSS & JS, at best, so please leave any // explanatory comments, alongside any responses containing code. That aside, for the front-end of one of the eCommerce sites I'm designing, I'd like to simulate an effect shown in the following: Qards Theme

I think I understand how to setup smooth scrolling anchors, but I need someone to show me the code for triggering the event of smooth scrolling to div classes, as a result of the user scrolling up/down. It would be helpful if someone could identify the name of the effect, shown in the Qards Theme, as there is likely online reference material. In fact, I'd like to hand-code an almost exact replica (hopefully more lightweight) of the Qards theme (with my own text, images), but I guess this is a good place to start.

Thanks for your assistance!