Scroll-to-top button for your website? Is it even that important? A simple push of a button could take the visitors to the top of the page however it seems I have few readers who loves to scroll their page using the scrollbars on the right. In the end, it is all fun and games when it comes to adding feature to this blog.
This scrolling feature seems to have quite an impact on the web surfers as there exists a chrome extension just for this very purpose, I am sure it is more advanced than what I did for my blog. In addition, I also need to refrain from overusing third party libraries as it takes quite a bit of toll on the webpage serving process therefore the very reason for me to write a very simple script myself. Let us start with designing the button itself, a trigger in simple words. A component initialization first and then SASS/CSS to design the button.
Don’t mind the comments, makes it easier for us later in the future if any changes are required. Moving onto SASS/CSS portion.
A little mixin to handle our
border-radius in various browsers.
This plain CSS is for those who are not familiar with SASS Preprocessor.
In order to meet my simplicity purposes, I decided to use built-in method,
.scrollTop() and jQuery documentation describes this method as follows.
Description: Get the current vertical position of the scroll bar for the first element in the set of matched elements or set the vertical position of the scroll bar for every matched element.
You can also customize after how many pixels of hidden view do you want the button to be visible by adding
> HIDDEN_PIXELS in the window’s
animate() function to give our scrolling a smooth effect.