How to make back to top button (EASIEST WAY)

Note: make sure you have imported awesome font


Put this in your HTML
<a href="#" id="scroll-to-top"><i class="fa fa-angle-up"></i></a>


Put these in your HTML

html {
  scroll-behavior: smooth;
}
#scroll-to-top{
position:fixed;
bottom:5%;
  padding:20px;
background:var(--primary-color);
content:"Top";
color:white;
right:20px;
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.3);
border-radius:50%;
height:50px;
width:50px;
-webkit-transition: 0.2s;
  transition: 0.2s;
}

#scroll-to-top i{
top:-5px;
position:relative;

}
#scroll-to-top:active {
  -webkit-transform: scale(0.9);
          transform: scale(0.9);
  box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.3);
}


Comments

Post a Comment

Popular posts from this blog

Workplace Task: 10 – Understanding Risk - Innovation

1. Purchase real estate. Some people think that the stock market is a good place to invest their money in the expected environment, which may be true. I am not a stock expert. And I am not a real estate expert. But I do know that real estate prices are usually conscious of the purchase of buildings with currency, and a piece of land or office space can usually be a good defense against inflation. Volume, an additional benefit is that you can do this at a very low interest rate. result. These people see this trend and they know that prices and interest rates will rise. No one panicked. But believe me, they are all preparing. Hope you too.  2. Lock in long-term loans. Of course, floating rate loans are good in a low interest rate (or lower interest rate) environment. But now is the time to renegotiate. Now it’s time to lock them in with a long-term fixed interest rate. 3. Buy now. Want to buy new equipment? Or a piece of property? Maybe your truck is wearing out. Is there an order fr...
Read more

“How-to” blog post + create infographic through Canva

Image
Demo blog post: https://jeffreylaudev.blogspot.com/2020/04/blog-post.html Step 1: Create a infographic You need to go to  https://www.canva.com/ You will be able to see their are many options and action you can do in this page. You need to follow the following: - click create a design - select infographic After you have clicked the button, you will see this page. 1. Menu bar  – This bar allows you to do features like Undo, Redo, Resize, Share, Download, Order prints, and others. You’ll also be able to see your design’s saving status from here. 2. Side panel  – This panel is a editor panel helps to the access any template and do any edit actions. It’s divided into 6 tabs dedicated to Templates, Images, Text, Uploads, Folders, and Apps. 3. Canvas  – This is your design playground. Have fun You can select a design templete and then edit all the text and photo After you have completed the design, click the download button Step 2 create...
Read more