Smooth vertical page scrolling using mouse wheel and scroll bar

javascript jquery scrollbar mousewheel parallax
DBUK picture DBUK · May 9, 2012 · Viewed 17.9k times · Source

I am playing around and trying to build a parallax website - yes, I know they are an annoying fad but I would still like to have a go. So, for inspiration, I have been looking at various examples of good parallax websites and came across this one: https://victoriabeckham.landrover.com/INT.

It has smooth scrolling using the mouse wheel, scrollbar, and anchor links. I have been searching for jQuery plugins that would achieve this effect but can only seem to find ones that use internal page links - anchor or ID's (detailed below) - but, not mouse wheel and scrollbar. There is a good chance that I am searching using the wrong keywords. Does anyone know the correct terminology to find these plugins or know any plugins that would achieve this effect?

On a side note, I am currently learning jQuery and Javascript but am in the very early stages - still trawling through codeacademy and not made it onto any real world code yet. So at the moment I am playing with plugins as a way of learning but hopefully in a few months I can build my own stuff!

Smooth scrolling to anchor tags or ID's:

And, another example of a parallax website using a similar technique for scrolling:

Answer

anuj_io picture anuj_io · May 9, 2012

Try this one. https://nicescroll.areaaperta.com/

It has got 

$().scrollTop()

jQuery event listener too so you can have scroll path configured with parallax script.

Related questions

How can I differentiate a manual scroll (via mousewheel/scrollbar) from a Javascript/jQuery scroll?

UPDATE: Here is a jsbin example demonstrating the problem. UPDATE 2: And here is the fixed version thanks to fudgey. Basically, I have the following javascript which scrolls the window to an anchor on the page: // get anchors with href's that …

Read More
javascript: detect scroll end

I have a div layer with overflow set to scroll. When scrolled to the bottom of the div, I wanna run a function.

Read More
Load ajax when scroll reaches 80%

I am using the following code which is working when the scroll bar reaches the botttom, if($(window).scrollTop() == $(document).height() - $(window).height()){ I however want that the ajax is fired when i reached 70% of the scroll not 100.

Read More