All you have to do is apply the scroll behavior CSS property to the whole HTML document. It’s quite simple to enable the scrolling animation when navigating from one position to another on the same page. Smooth scrolling animation is a useful feature and visual enhancement on websites that use navigation from one position on a single page to another.Įnabling scrolling animation using the scroll behavior CSS property In case you are optimizing your website for extremely fast loading speed where every millisecond counts, you should consider using the scroll behavior CSS property instead. Even though, the script is very lightweight and those 1-2 requests shouldn’t concern you too much. The downside of using a Smooth scroll jQuery script is that it will generate 1-2 server requests to your website and slightly affect the loading speed. Unlike the scroll behavior CSS property, this method offers some customization possibilities, such as scrolling speed adjustment, different animation types, target offset, etc. Adding a Smooth scroll jQuery script to a website might need slightly more development experience, but it’s still a quite simple and quick task. In the other hand, a Smooth scroll jQuery script will work in all browsers by default. We expect that in the near future all browsers will support the scroll behavior CSS property. Since Safari market share on desktop computers is around 10% and 25% on mobile phones (early 2020 data), it might be wise to use this technique nevertheless browser incompatibility while gaining on loading speed. Speaking of major and most popular browsers, only Safari doesn’t support scroll behavior yet. The downside of scroll behavior CSS property is that since it’s a relatively new property it’s not yet supported by all browsers. Smooth scroll works nicely by default, but you can’t adjust the scrolling speed, choose animation type, etc. The scroll behavior CSS property doesn’t offer any possibility for customization of the scrolling animation. Nowadays when loading speed becomes more and more important, this fact has to be considered. Since this is a pure CSS solution it doesn’t affect website loading speed at all. The scroll behavior CSS property is the simplest and quickest way to add animated scrolling effect to your website. Difference between Smooth scroll jQuery script and scroll behavior CSS property This tutorial will teach you how to use both options and help you decide which one is better for your project. There’s also a even simpler solution using only the scroll behavior CSS property. Apart from many plugins available, you can implement this function by adding a simple smooth scroll jQuery script to your website. This library is released under the MIT license.Adding a smooth scrolling animation when navigating between elements on a single page is a quite simple task. If this script is not what you need, you might have more luck there: While I was looking for a name for this script, I found these sites. Wouldn't it be great if all w3c specs where that easy to navigate in? Similar scripts I just changed the style so the table of content is fixed to the left.Ĭheck out the result. The example.html file is basically the script applied to a w3c page. My code is heavily commented so you shoudn't lose yourself too much. You can also change the default duration of a scroll, which is 500ms by default. You can change it quite easily in the code. There is an ease-in-out type timing function. Here are some indications if you want to tweak the code to fit your needs: addEventListener ( ' click ', handleClick ) smoothscroll.js
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |