NEW SMOOTHSCROLL CODE
This piece of code looks for the DOM element with ID orangeable, then scrolls to the top portion of that element until it's in view. The above snippet jumps the user down 1,000 pixels vertically from the top of the web page, just without the animation.Ĭreate a smooth scrolling animation with the following JavaScript syntax: window.scroll() You're probably already familiar with creating a scroll that automatically jumps to a specific location within a webpage: window.scrollTo(0, 1000) Clicking a menu option or button to take a user to a different part of the current page is ideal, but setting auto-scrolls throughout the site to lure them to other places they wouldn't expect is not. Make sure that you're not putting auto-scroll features all over your site where your users wouldn't expect to have it. While smooth scrolling is a great feature to have, it can also be easily abused. Overall, it provides a more pleasant and user-friendly experience. So now you know where you are and how you arrived there. The animation guides you to the desired spot after clicking on a web page element. This abrupt change can be confusing to many users.Įnter smooth scrolling, which JavaScript provides seamlessly. You click on a web page element, only to find that the screen has suddenly changed and you don't know what happened or where you are. Those days are history now that JavaScript supports this feature across almost all modern browsers with the built-in window.scrollTo() method. The default is 300ms.A third-party library used to be required to accomplish simple effects like a smooth scrolling with JavaScript. Scroll distances shorter than that will take less time, and scroll distances longer than that will take more time. This a number representing the amount of time in milliseconds that it should take to scroll 1000px. Smooth Scroll allows you to adjust the speed of your animations with the speed option. Smooth Scroll accepts multiple selectors as a comma separated list. You can selectively target links using any other selector(s) you'd like. Note: The a selector will apply Smooth Scroll to all anchor links. Nice work! var scroll = new SmoothScroll( 'a') In the footer of your page, after the content, initialize Smooth Scroll by passing in a selector for the anchor links that should be animated. Note: Smooth Scroll does not work with style anchors. Give the anchor location an ID just like you normally would. No special markup needed-just standard anchor links. You can also use NPM (or your favorite package manager). I recommend linking to a specific version number or version range to prevent major updates from breaking your site.
NEW SMOOTHSCROLL DOWNLOAD
You can download the files directly from GitHub.
Otherwise, use the version with polyfills. If you're including your own polyfills or don't want to enable this feature for older browsers, use the standalone version. There are two versions of Smooth Scroll: the standalone version, and one that comes preloaded with polyfills for closest(), requestAnimationFrame(), and CustomEvent(), which are only supported in newer browsers. The src directory contains development code. 🚀Ĭompiled and production-ready code can be found in the dist directory.
NEW SMOOTHSCROLL HOW TO
Want to learn how to write your own vanilla JS plugins? Check out my Vanilla JS Pocket Guides or join the Vanilla JS Academy and level-up as a web developer.
There's a native CSS way to handle smooth scrolling that might fit your needs. Quick aside: you might not need this library.
NEW SMOOTHSCROLL LICENSE
Getting Started | Scroll Speed | Easing Options | API | What's new? | Known Issues | Browser Compatibility | License A lightweight script to animate scrolling to anchor links.
0 kommentar(er)
