Hate the complexity of modern front‑end web development? I send out a short email each weekday on how to build a simpler, more resilient web. Sign up today and get 25% off registration. ⏰ Last Chance! A new session of the Vanilla JS Academy started this week, but it's not too late to join. To learn more about how I made the transition, read Ditching jQuery for Vanilla JS. SmoothScroll.js, simple jQuery script to animate scrolling to anchor links.Slider, a responsive, touch-enabled content slider.Tabby, lightweight, mobile-first toggle tabs.Houdini, a simple expand-and-collapse widget.Astro, a collection of mobile-first navigation patterns.The add-ons were designed to integrate with Kraken, my mobile-first boilerplate, but they work great as standalone scripts, too. Don't worry - if you need more backwards compatibility, you can still get the old jQuery versions of all the add-ons. The add-ons will only work with modern, HTML5-standards browsers (that means IE 9 and higher).If you still want or need to use a framework, you can pick any one you want.Vanilla JS is a lot faster than using a framework. So what’s that mean for you? A few things: Smoothscroll plain js code#Here’s the code needed for this implementation: const links = document.querySelectorAll(".page-header ul a") ĭocument.querySelector(href).Over the last two weeks, I converted all of the interactive Kraken add-ons from jQuery to vanilla JavaScript. This can accept as well the familiar behavior property with the value set to smooth. window.scroll()), there’s also the scrollIntoView() method which applies to DOM elements. The effect should look the same.īeyond the aforementioned scroll methods which are attached to the window object (i.e. Tip: instead of the scroll() method, we could equally have used the scrollTo() and scrollBy() methods. Link.addEventListener("click", clickHandler) Ĭonst offsetTop = document.querySelector(href).offsetTop It comes with a smooth scrolling list in which list items can be clicked and. Here’s the required code: const links = document.querySelectorAll(".page-header ul a") This Vanilla JS code snippet helps you to create a smooth scroll to sections. Again here, all we have to do is to set the value of the behavior property to smooth. This property is the JavaScript representation of the scroll-behavior CSS property and can receive the auto (default) and smooth values. Inside this method, we’ll determine the scrolling behavior via the behavior configuration property. Please note that each section needs a unique ID. The logic for this approach is similar to the previous jQuery implementation. To enable SmoothScroll on internal links, just add the attribute data-smooth-scroll to the parent container like our Menu. Using the scroll() Methodįirst, we’ll use the scroll() method. Happily enough, it’s much simpler than you might expect. 5. Smooth Scrolling With Vanilla JavaScriptĪt this point, we’ll throw away jQuery and concentrate on two pure JavaScript solutions. My recommendation is to use it only if your project already uses or needs jQuery. back with another smooth scroll tutorial where we will be implementing svg. On the contrary, it's a reliable solution that will work well on different screens/devices and you can customize the scrolling speed. Simple jQuery Slider is a lightweight jQuery Slider that does exactly what a. The major downside of this method is that you have to load an extra JavaScript library. The menu will cover one-fourth of the available width, while the text the remaining three-fourths (the responsive stuff isn’t really important here). The CSS part will be pretty straightforward, nothing extraordinary.įirst, we’ll use CSS Grid to layout the page header. This association (what we refer to as a fragment identifier) will allow us to jump to specific parts of our page. Inside it, we’ll specify a navigation menu and an introductory text.Įach section will have an id whose value will match the href value of a menu link. Let’s get started! 1. Begin With the HTML Markupįor demonstration purposes, we’ll define a header wrapped within a container and four sections. Just to give you an idea of what we’ll discuss during this tutorial, check out one of the demos we’ll be building:
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |