The source code is written in ES6 and needs to be used with a JavaScript build tool for transpiling and bundling modules. With a suitable polyfill for requestAnimationFrame it should run even on older browsers.īefore diving into a demo to show the usage of Jump.js, we are going to make some slight changes to the original code, that will however leave its inner workings unmodified. Again, refer to the documentation for the full list of supported browsers. Jump.js runs without problems on ‘modern’ browsers, including Internet Explorer version 10 or higher. We will see them in action later in the demo. We can configure a jump with some options such as the duration (this parameter is mandatory), the easing function, and a callback to be fired at the end of the animation. Note that currently only the scrolling of the viewport is supported and only vertically. This means that in the implementation of the smooth scrolling pattern, we must perform the link hijacking ourselves. A Demo is available on the GitHub project page.Īs suggested by the library name, it provides only the jump: the animated change of the scrollbar position from its current value to the destination, specified by providing either a DOM element, a CSS selector, or a distance in the form of a positive or negative number value. It is a small utility, being only about 42 SLOC, but the size of the provided minified bundle is around 2.67 KB because it has to be transpiled. Jump.js is written in vanilla ES6 JavaScript, without any external dependencies. The full source code is available on GitHub. See the Pen Smooth Scrolling by SitePoint ( on CodePen. Here is a is the final demo that we’ll be creating: Support, when available, for native smooth scrolling with CSS will then be added and finally we will conclude with some observations concerning the browser navigation history. We will then create a HTML page to test the smooth scrolling behavior that it will be then implemented as a custom script. In doing this, we will refresh some core JavaScript language skills such as functions and closures. Specifically, we are going to explore and leverage the Jump.js library.Īfter a presentation of the library, with an overview of its features and characteristics, we will apply some changes to the original code to adapt it to our needs. There are many implementations of this pattern within the jQuery ecosystem, either using jQuery directly or implemented with a plugin, but in this article we are interested in a pure JavaScript solution. This is nothing new, being a pattern known from many years now, check for instance this SitePoint article that dates back to 2003! As an aside, this article has a historical value as it shows how client-side JavaScript programming, and the DOM in particular, has changed and evolved over the years, allowing the development of less cumbersome vanilla JavaScript solutions. Smooth scrolling is a user interface pattern that progressively enhances the default in-page navigation experience, animating the change of position within the scroll box (the viewport, or a scrollable element) from the location of the activated link to the location of the destination element indicated in the hash fragment of the link URL. Thanks to all of SitePoint’s peer reviewers for making SitePoint content the best it can be! You can also use the scroll-behavior CSS property to implement the smooth scrolling on a scrolling box.This article was peer reviewed by Adrian Sandu, Chris Perry, Jérémy Heleine and Mallory van Achterberg. So, if you're looking for an easy way to add smooth scrolling to your pages, keep reading! Smooth Scroll With Pure CSS? We'll also discuss how to implement them and some of the benefits they offer. In this article, we'll take a look at the 10 best Vanilla JavaScript (and jQuery) Smooth Scroll plugins to bring the smooth scrolling experience on your long web page. When implemented well, it provides an enjoyable user experience and can make your site feel more polished. The Smooth Scroll feature enables the user to smoothly scroll the webpage to a specific point or element within the webapge when clicking or tapping anchor links.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |