To take advantage of this, you can create an active class and add an underline to the link. When I clicked on that or manually scrolled to the bottom of the page, I noticed that the active class is, in fact, applied. To prove this, I opened up the Chrome DevTools and inspected the fifth as shown below. This can be triggered by clicking on the itself or by scrolling down to the manually. A is considered active if its to element is in view near the top of the page. The activeClass property allows you to define a class to apply to the component when its to element is active. With these added, you should be able to go back to your browser (your app should have automatically restarted already) and see smooth scrolling in action. You’ll need to update each of the nav-items accordingly. The only difference between them will be the to property as they each point to a different : Here’s an example of the properties that you will use for each component. With the offset property, you can define an additional amount of scrolling to perform to get to each. In this case, this will be each of your s. The to property is the most important part as it tells the component which element to scroll to. duration - The time of the scroll animation.offset - To scroll additional px (like padding). spy - To make Link selected when scroll is at its target’s position.activeClass - The class applied when element is reached.You can read about all of them on the documentation page.įor now, pay special attention to activeClass, to, spy, smooth, offset, and duration. To date this has only been implemented in Chrome, Firefox and Opera. With all of your imports defined, you can now update your nav-items to use the component. Smooth Scroll behavior polyfill The Scroll Behavior specification has been introduced as an extension of the Window interface to allow for the developer to opt in to native smooth scrolling. Notice that I’ve aliased animatedScroll to scroll for ease of use. Import the react-scroll package: import from "react-scroll" Install react-scroll: npm i -S react-scroll You’ll be building a simple app in this tutorial, but if you want a quick rundown of how react-scroll works, feel free to reference these condensed steps: Node.js installed locally, which you can do by following the How to Install Node.js and Create a Local Development Environment tutorial.To set this up, review the Getting Started with Git tutorial. You will need the following to complete this tutorial: In this article, you are going to use the react-scroll package on npm to implement smooth scrolling. It’s one of those subtle UI features on a site that makes an aesthetic difference. You’ll need to update each of the nav items accordingly.Smooth scrolling is when instead of clicking on a button and being instantly taken to a different part of the same page, the user is navigated there via a scroll animation. The only difference between them will be the “to” property as they each point to a different section. Here’s an example of the properties that we will use for each Link component. * Duration *is pretty slelf-explanatory, and spy and active class we will come back to in a minute. With the * offset *property, you can define an additional amount of scrolling to perform to get to each section. In this case, this will be each of our sections. The “ to” property is the most important part as it tells the component which element to scroll to. duration - time of the scroll animation can be a number or a function.offset - scroll additional px (like padding).spy - make Link selected when the scroll is at its targets position.activeClass - class applied when an element is reached.You can read about all of them on the documentation page on NPM, but we will pay special attention to activeClass, to, spy, smooth, offset, and duration. With all of our imports defined, we can now update our nav items to use the “Link” component. Notice that I’ve aliased “animatedScroll” to “scroll” for ease of use. Then, open the Navbar.js file back up and add an import for two named imports, “Link” and “animateScroll”.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |