"Scroll to the top button"
Bootstrap 3.0.0 Snippet by Glgcoder

<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; }

Related: See More


Questions / Comments: