If you write very long articles, you need a back to top button on your site to allow users easily scroll back to the top.
In this article, we will go through several designs of the back to top button to give you a great bunch of resources to choose from.
If you don't know any principles of web design, you can just copy the code and paste it as I have guided at the end of the article.
I will guide you on how to place the code on every page and post on your blog. I think we need no time wastage here. Let's start with the normal button.
Code for normal back to top button
<h1 id="em">The point to scroll back to</h1>
<!-- inflated element-->
<p id="inflate">it's an inflate</p>
<p id="inflate">inflate</p>
<p id="inflate">another inflate</p>
<p id="inflate">another inflate</p>
<p id="inflate">another inflate</p>
<p id="inflate">another inflate</p>
<p id="inflate">another inflate</p>
<style>
p{font-size:60px;}
#enm{ padding:auto;font-size:50px; background-color:red;width:70px;height:70px;border-radius:50%;position:fixed; bottom:20px;right:20px;
}
#lnk{text-decoration:none;color:black;text-align:center;}
</style>
<a href="#em" id="lnk"><div id="bigg"><div id="enm">up</div> </div></a>
That's the html for creating a red round button at the bottom right corner of your pages. Though it's a button, it is static. To make it respond to the user, we add a hover attribute or use onmousedown and onmouseup from JavaScript.
Using the hover we add;
#enm:hover{ padding:auto;font-size:50px; background-color:red; width:70px;height:70px;border-radius:50%;position:fixed; bottom:20px;right:20px;}
Another way of achieving click modulation is using the html button element like the example below
The code for that one is here;
<html>
<body>
<h1 id="em">The point to scroll back to</h1>
<!-- element to inflate with JavaScript-->
<p id="inflate">it's an inflate</p>
<p id="inflate">inflate</p>
<p id="inflate">another inflate</p>
<p id="inflate">another inflate</p>
<p id="inflate">another inflate</p>
<p id="inflate">another inflate</p>
<p id="inflate">another inflate</p>
<style>
p{font-size:60px;}
#enm{ padding:auto;font-size:50px; background-color:red;
width:70px;height:70px;border-radius:50%;position:fixed; bottom:20px;right:20px;box-shadow:10px,20px,5px,4px;}
#enm:hover{ padding:auto;font-size:50px; background-color:red;
width:50px;height:50px;border-radius:50%;position:fixed; bottom:30px;right:30px;
}
#bigg{width:80px;height:80px; background-color:rgba(23,00,00,0.3);border-radius:50%;position:fixed; bottom:15px;right:15px;}
#lnk{text-decoration:none;color:black;text-align:center;}
</style>
<a href="#em" id="lnk"><button id="bigg"><div id="enm">up</button> </div></a>
</body>
</html>
That will help with somehow improved design.
You can do so many personal designs including the following;
That is with rgba set as follows;
#bigg{width:80px;height:80px; background-color:rgba(99,00,00,0.3);border-radius:50%;position:fixed; bottom:15px;right:15px;}
One more design can be with bottom value changed as follows;
It's code is modified here:
#bigg{width:80px;height:80px; background-color:rgba(99,00,00,0.3);border-radius:50%;position:fixed; bottom:10px;right:15px;}
Another great modification that I can leave to you is the box-shadow. That will let the button stand out of your page.
How to install the button
Go to your theme then to customize. Click edit HTML and paste the code just after the <body> tag of that bunch of code.
You can also decide to paste the empty element to scroll back to before the <body> tag then the fixed button code before the closing </body> tag.
Keep the spirit. Share the article with friends and of course let me know if you have any improvement to the article.
AUTHOR
Emmy Jayson
Comments
Post a Comment
Put your comment here