<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!--Pulling Awesome Font -->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<div class="container">
<div class="row">
<h2>This snippet works on scrolling upwards will appear bottom right corner</h2>
<font size="5" , face="garamond" color="#63A6A5"><p><i> My learning to code is an answer to a prayer. On a quest to finish a website I started building using templates I discovered that I need much more. I soon learned that what I needed was to hire a web developer to create a website and a database. I had to also consider maintaining and protecting my client's data.</i></p>
<p><i>I started out on a journey to learn computer programing so I could develop an app to help people get out of debt. I have now decided to help other women learn to code as well. I am looking forward to launching DEBTXIT the app, I did however get the websit up without the app and for the first year had over 11 thousand hits. Happy was I but I still need to learn much about web design, writing content that wont bore the hek out of folk, web security and web app development.</i></p>
<p><i>Todate I have learned HTML, CSS, JQuery, Ruby, Ruby on Rails, PHP, SQL and i am currently enrolled in Freecodecapme.com where I will receive a frontend development certificate and a few other certificaitons. I so look forward to building my program to help folk get out of debt. there is so much to learn on the developmet side as well as on the business side.</i></p> </font>
</div>
</div>
<!-- dont change script-->
<button onclick="topFunction()" id="myBtn" title="Go to top">
<i class="fa fa-chevron-up"></i></button>
#myBtn {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 99;
border: none;
outline: none;
background-color: #FD6606;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 50%;
}
#myBtn:hover {
background-color: #FF1493;
}
#myBtn:hover i,
.triggeredHover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-ms--transform: rotate(360deg);
-o--transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
-ms-transition: all 0.2s;
transition: all 0.2s;
}
#myBtn:hover {
color: #fff;
-webkit-transition: all 0.8s;
-moz-transition: all 0.8s;
-o-transition: all 0.8s;
-ms-transition: all 0.8s;
transition: all 0.8s;
}
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {
scrollFunction()
};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("myBtn").style.display = "block";
} else {
document.getElementById("myBtn").style.display = "none";
}
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
