Add a smart 'back to top' button to your blog 👓🔝

1

Lo-Dash

In a previous post, How to detect scroll direction in vanilla JavaScript (to make a goofy logo animation), I describe how to determine if a user is scrolling up or down. I use a scroll event listener to react to the user's scroll activity. I also discuss how a throttle function can improve the performance of the scroll event handling. I will use the throttle function from the lodash library in this example. If you are not familiar with throttling, give the post a read to understand it fully.

#Development Tools #Javascript UI Libraries #JavaScript Framework 84 social mentions

2

Heroicons

I use an icon rather than text inside the link to keep the size small. I choose the "chevron-up" icon with the solid fill from hero icons. I copied the SVG and pasted inside the a element. We will set the size of the icon in CSS later.

#Web Icons #Vector Icons #Icon Fonts 66 social mentions

3

CSS-Tricks

You can see one on CSS Tricks (as per screenshot below), just scroll down a bit and it will appear.

#CSS #CSS Tutorials #CSS Tricks 128 social mentions