How to Add a Sticky “Back to Top” Button to Your Website

There are many arguments to why you should or should not add a back to top button to your webpage/website. However, one common agreement is that it could prove to be useful on pages that are long. The code that I have developed focuses on page length, and the scrollbar speed is based on the position of the scrollbar.

Things Needed for This Project:

Refer to the image below on how to properly add Font Awesome and jQuery to your HTML file. If the image is too small on your screen, right click the image and click on "open image in new tab". If you struggle to add an icon from Font Awesome unto your page check out this YouTube video.

First, we need to create three files, add Font Awesome, and add jQuery to our HTML file. I recommend that you use the most up-to-date stable version of jQuery. Font Awesome supplies developers with high-quality icons that render very well. We will start off simple and start editing the HTML file.

Add the necessary tags:

HTML5 Tags

To add font awesome to your HTML file is easy. If you have ever implemented external CSS, it works the same way. To add jQuery you have to use the script tag, add type and src attributes.

Next, we will work on the JavaScript file.

Here is the completed code:

JavaScript Code

It is highly recommended to use the time out if statement. The reason why is if you were to implement the code without the time out if statement the back to top button would bog down your and the users’ CPU. The original code I had implemented came with this nasty bug(feature). However, after doing some research, I came across this solution.

What the timer does is it delays the (window).scroll. The (window).scroll function only fires off every 200 milliseconds. This value can be changed to whatever value you want. However, with our checkposition function, the code only fires off once the scrollbar has reached a certain point. For our current code, the position is 900.

If you have a small page, that has a scrollbar position below 900, then the button will not show up, and the code will not fire off. So you do not have to worry about removing the button from individual pages if you have automated the process of applying the button.

The checkposition function is quite simple it is just as the name implies. If the scrollbar position(scrollTop() Function) is above 900, then make the button appear. Anything below 900 makes it fade out. If you would like to learn more about the scrollTop() function click here. Next, we have the animate portion.

This portion of code is a simple click event. Once you or the user click on the back to top button, in our case we have set the button up with an id attribute with a value of back-to-top. We use the native JavaScript ‘animate’ function and the values we plug into the code, we set scrollTop to 0. From there we set the speed.

To avoid hardcoding we have set a variable and added a value to it. For simplicity, I have named it scrollSpeed. This value can be changed to whatever you want. I have divided the scrollTop function by our divider to make the scroll speed more dynamic based on where you are on the page. Next, we have the CSS.

The CSS file is by far the simplest part of this little project.

Here is the CSS code:

Custom CSS Styling

It is important to that you make the position fixed on the screen. In case you have other things that are fixed on the screen I would recommend you use z-index and set a high value to it. This way your button does not become hidden under whatever else that you have with a z-index.

Make sure that you set the display to hidden. Setting the display to hidden makes sure that the button disappears when the page loads. If you do not do this, the button will appear for a split second and then disappear.

Next, we set the position of the button I have set the bottom and right position to 20. Making the button appear very close to the bottom right of the screen. If you're a complete beginner, this project may seem daunting at first, however, if you keep practicing you'll catch on very quickly.

Check out the JSFiddle below for the demo of the project:

Here are a some websites that implement a back to top button or a similar version to it.

T-Mobile Logo

T-Mobile

Dribbble Logo

Dribbble

ITER Logo

ITER - The Way to New Energy

I hope you learned something new today. The back to top button is an ongoing project that I originally worked on in my free time and then updated the code with new features. Let me know if you found this coding exercise/project helpful or if you find a better way to achieve what I have done in the comments below. Thank you and have a wonderful day!

custom horizontal rule

Negotiating Your Salary

Software Engineering Radio Episode 275

Marcus Blankenship conducted this interview with Josh Doody. In the podcast, they discuss negotiating tactics, steps to take to get the salary you want, and tips on how to handle certain situations. Josh Doody and Marcus Blankenship also explain when negotiating is appropriate and when the opportunity to negotiate arises, how to take care of it. Check out Software Engineering Radio for more!

Download
custom horizontal rule

Best CSS3 Frameworks in 2016

In today's advancing world, there are many CSS frameworks. I have collected my top three based on file size, usability and user experience.

Relative Post: Top 10 best free UX books for 2016

Bootstrap

Bootstrap

The first framework on this list is Bootstrap. The file size of Bootstrap compared to the rest of these frameworks is much larger. However, Bootstrap is fairly easy to use, and my overall experience with the framework has been pleasant. If you are planning to do a simple project I would definitely recommend the other two frameworks on this list rather than, Bootstrap because of the drastic difference in file size. Which in turn could make your website lag. Next we have number two on this list.

Min

Min

Out of the three frameworks, Min has the smallest file size. It also supports a 12 column grid system just like Bootstrap. Min also supports old browsers such as Internet Explorer 8! However, Bootstrap doesn't support archaic browsers. Make sure you keep your browsers up-to-date... especially Internet Explorer and Microsoft Edge browsers. Last but not least, we have Semantic UI.

Semantic UI

Semantic UI

One great thing about Semantic UI is all of its unique and responsive designs. Although, there are not enough layouts, in my opinion, the developers did include many theme variables. Even Snapchat uses Semantic UI.

In Conclusion

Overall, I prefer to use Bootstrap. Another thing that should be mentioned is the current usage of Semantic UI has dropped compared to Bootstrap and Min. If you do end up with a small project I would definitely recommend trying Min. Much of the features mimic Bootstrap to an extent without the large file size. Those were the three frameworks that I recommend you check out! If your favorite framework is not on the list, let me know in the comment section below! Have a wonderful day!

custom horizontal rule

Learn jQuery in 15 minutes!

Hello! If you are thinking about learning the jQuery library this is a great resource. First, the topic is covered in a clear and concise manner. Second, the video shows just how simple jQuery is compared to vanilla JavaScript.(js for short)

Relative Post: How to create floating effects with CSS

In the series Travis covers fadeIn, fadeOut, a basic image slider, selectors, animations and much more... all within 15 minutes. Yes, it is a quick glance over of jQuery but it is a great starting point for beginners. If you are a beginner, I would first learn vanilla js before jQuery. That way you can appreciate jQuery much more; if jQuery one day becomes obsolete, there is always vanilla js!

If you are looking to check out more videos, the channel is called Dev Tips. It is a great resource to have in your 'developer toolkit' whether, a beginner or expert. I hope you learned something new today after watching that video. Have a wonderful day and enjoy this fine Sunday!

custom horizontal rule

Image Floating Effect Using Mostly CSS!

This is the code for your HTML:

img location

This is the code for your CSS:

#img {

-webkit-box-shadow: -2px 7px 40px 2px rgba(0,0,0,0.49);

-moz-box-shadow: -2px 7px 40px 2px rgba(0,0,0,0.49);

box-shadow: -2px 7px 40px 2px rgba(0,0,0,0.49);

-webkit-transition: all ease-in-out 500ms;

-moz-transition: all ease-in-out 500ms;

-o-transition:all ease-in-out 500ms;

transition: all ease-in-out 500ms;

}

#img:hover {

-webkit-box-shadow: -2px 19px 24px 0px rgba(0,0,0,0.3);

-moz-box-shadow: -2px 19px 24px 0px rgba(0,0,0,0.3);

box-shadow: -2px 19px 24px 0px rgba(0,0,0,0.3);

transform: translate(0px,-4px);

}

The Code in Depth:

The HTML part is quite easy, however, the CSS is a lot more complex. The transition effect must be included in the code in order to improve the quality of the float effect. The -moz-, -webkit-, and the occasional, -o- simply refer to the different browsers. -moz- refers to Mozilla Firefox, -webkit- for Google Chrome and Safari, and -o- is for Opera.(Occasionally, -ms- is used for Internet Explorer) The line transform: translate(0px, -4px) produces an upwards hover. Also, the two values that you choose to plug-into this line affect the horizontal and vertical axis, accordingly. Now that we've covered the basics we can go deeper into the values.

Relative Post: New CSS3 features

The values that you plug into box-shadow are as follows (horizontal length, vertical length, blur radius, spread radius, shadow-color). In the case of the shadow-color, I use rgba which stands for Red, Green, Blue, Alpha. Alpha referring to the opacity. Just note that you must decrease the opacity of the box-shadow, increase vertical length as well as, decrease both blur radius and spread radius in the :hover in your CSS. Otherwise, the image will look like it is sinking into your web-page instead of floating away from your web-page.

Thanks for tuning in! I hope you learned something today. If you are confused or lost, feel free to contact me! Also, if you find an easier way to set this up, let me know! My email address is ajdinmasic@websolutions.today. Have a wonderful day and never stop learning and perfecting your craft!

custom horizontal rule