How to enforce a “smooth scrolling” rule for mousewheel, jQuery?

Question

How are you? My Question:

How can I control or specify the way a document scrolls to the position of desire described by either the mouse scrollwheel, an

Answer 1

I had a very simmilar problem. I wanted to change the scroll function of a normal page. I want every scroll to be exactly of an specific height so that the page stops in very specific positions only.

I realized it in the following way:

1. Used Plugins

Download and include the following 2 jQuery plugins and jQuery itself:

• scrollTo (see also here)
• mousewheel (see also here)

2. Mousewheel event

The easiest way is to use the mousewheel plug in that way:

$('body').mousewheel(function(event, delta) { /* code here */ });

The variable delta is then negative or positive, depending if the wheel was scrolled up or down. If you return false I think (!) it disables the normal scroll.

3. Scroll method

In order to scroll the page I used scrollTo, but any other plugin (like Smooth Scroll suggested in the other answer) should also do it.

4. Complete code

Place this in the head part of you HTML-File:

5. Demo

I created a demo here: http://pastehtml.com/view/ba0ziusqk.html