Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Smooth vertical page scrolling using mouse wheel and scroll bar

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:

  • http://archive.plugins.jquery.com/project/ScrollTo
  • http://jsfiddle.net/9Amdx/7/
  • http://arthurclemens.github.com/jquery-page-scroll-plugin/
  • http://www.learningjquery.com/2007/09/animated-scrolling-with-jquery-12
  • http://www.designova.net/scrollerbird/
  • http://chris-spittles.co.uk/?p=462
  • http://joelb.me/scrollpath/ (*courtesy of @DrunkRocketeer)

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

  • http://www.ascensionlatorre.com
like image 563
DBUK Avatar asked May 09 '12 13:05

DBUK


People also ask

How do I make my mouse wheel scroll vertically?

Move your mouse pointer away from the scroll-bar and then move the mouse wheel. Or else see if you can disable the horizontal scroll-bar. Press the middle mouse button once and then move your pointer to scroll the page vertically.

What is smooth scrolling Logitech options?

Pixel smooth. Without Smooth Scrolling, web pages typically scroll in choppy three-line increments. With Smooth Scrolling web pages will glide across your screen in single-pixel increments. It's so smooth you can even read as you scroll.

How do I navigate to another page with a smooth scroll?

Modern Browsers detect the hash in the url and then automatically open that part. So, if you want to scroll smoothly to that part instead, you first need to reset the scroll position to 0 and then add smooth scrolling. // direct browser to top right away if (window. location.


1 Answers

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.

like image 142
anuj_io Avatar answered Sep 16 '22 22:09

anuj_io