Scroll to

Animated JavaScript window and element scrollTo

Documentation on GitHub. Install it from npm, or grab javascipt file from GitHub (not recommended).

npm install animated-scroll-to

What is this?

This is a plain JavaScript animated scroll to function. It has easing, and accepts speed per 1000px rather than duration. Then function recalculates the duration, and sets the minimum of 250ms or maximum of 3000ms. If you give it offset which is larger from the maximum scroll value, it will use latter. Also it disables user scrolling while scroll animation is in progress.

Demo

Window

Use buttons at the top of the page to scroll window

Custom DOM element

Use buttons beneath to scroll element

Use buttons above to scroll this element

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam facilisis feugiat leo vel tempor. Nullam mollis tortor quis fringilla ultricies. Vivamus eu libero malesuada orci sagittis feugiat. Nulla cursus tempor velit, vitae pellentesque ex placerat faucibus. Fusce elementum ante eget nulla condimentum, non efficitur erat venenatis. Aliquam nunc diam, tincidunt eget arcu sed, feugiat laoreet dolor. Nulla in laoreet odio. Ut nec egestas enim. Nam vestibulum pretium laoreet. Nam magna magna, dignissim volutpat augue non, imperdiet feugiat odio.

Vivamus suscipit fermentum lorem, sit amet lacinia ex accumsan nec. Vivamus iaculis, neque sed auctor congue, risus ipsum laoreet odio, eu mollis dolor justo elementum dui. Praesent facilisis eleifend mattis. Aliquam ut erat dictum, aliquet ligula et, commodo felis. Nullam non venenatis lorem. Donec consectetur lectus a consectetur porta. Phasellus vel commodo tellus. Donec egestas rutrum semper.

Suspendisse ac luctus velit. Proin nunc erat, placerat sit amet consectetur nec, dictum sit amet velit. Nulla semper nibh sit amet sem fermentum, pretium placerat augue rutrum. Proin tellus lorem, sodales nec lacus eu, auctor euismod neque. Praesent rutrum elit eu magna pulvinar, quis hendrerit tortor dapibus. Etiam fringilla molestie dui ut suscipit. Aenean quam nisl, imperdiet nec egestas sed, congue eu orci. Cras vehicula auctor diam at sodales. Nulla blandit faucibus ex, id lacinia neque ornare vitae. Pellentesque a felis neque.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam facilisis feugiat leo vel tempor. Nullam mollis tortor quis fringilla ultricies. Vivamus eu libero malesuada orci sagittis feugiat. Nulla cursus tempor velit, vitae pellentesque ex placerat faucibus. Fusce elementum ante eget nulla condimentum, non efficitur erat venenatis. Aliquam nunc diam, tincidunt eget arcu sed, feugiat laoreet dolor. Nulla in laoreet odio. Ut nec egestas enim. Nam vestibulum pretium laoreet. Nam magna magna, dignissim volutpat augue non, imperdiet feugiat odio.

Vivamus suscipit fermentum lorem, sit amet lacinia ex accumsan nec. Vivamus iaculis, neque sed auctor congue, risus ipsum laoreet odio, eu mollis dolor justo elementum dui. Praesent facilisis eleifend mattis. Aliquam ut erat dictum, aliquet ligula et, commodo felis. Nullam non venenatis lorem. Donec consectetur lectus a consectetur porta. Phasellus vel commodo tellus. Donec egestas rutrum semper.

Suspendisse ac luctus velit. Proin nunc erat, placerat sit amet consectetur nec, dictum sit amet velit. Nulla semper nibh sit amet sem fermentum, pretium placerat augue rutrum. Proin tellus lorem, sodales nec lacus eu, auctor euismod neque. Praesent rutrum elit eu magna pulvinar, quis hendrerit tortor dapibus. Etiam fringilla molestie dui ut suscipit. Aenean quam nisl, imperdiet nec egestas sed, congue eu orci. Cras vehicula auctor diam at sodales. Nulla blandit faucibus ex, id lacinia neque ornare vitae. Pellentesque a felis neque.

1
2
3
4
5
6
Page with element
7
8
9