"Back to Top Scroll Feature"
Bootstrap 3.3.0 Snippet by caruellej

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <!-- Put this in your head tag in your template --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <div class="wrapper"> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navigation"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand " href="#">YouSite.com <span class="label label-warning text-capitalize"> Free</span></a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="navigation"> <ul class="nav navbar-nav navbar-right"> <li><a href="#">About</a></li> <li><a href="#">Features</a></li> <li><button type="button" class="btn btn-success navbar-btn btn-circle">Sign in</button></li> </ul> </div> </div> </nav> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lobortis justo sed metus tempor, eget auctor metus dictum. Curabitur enim nibh, suscipit a pulvinar vitae, rhoncus at ipsum. Etiam faucibus nibh ac rutrum faucibus. Etiam cursus at elit eget tristique. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce est mauris, auctor in hendrerit iaculis, dictum eget arcu. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum quis metus nec justo gravida sodales sed eu sapien. Curabitur non ligula nulla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam et lorem eget urna pellentesque feugiat non ac leo. Sed volutpat porta ornare. Aenean et augue dignissim, malesuada felis non, mattis est. Morbi auctor scelerisque ipsum. Aliquam mollis ornare est, a iaculis justo sagittis ac. Nunc vestibulum, neque in sollicitudin tincidunt, lacus urna condimentum diam, vel vehicula eros urna eu tellus. Sed vel leo vulputate, molestie turpis at, consequat mauris. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris auctor iaculis semper. Mauris aliquet tortor nisl, sit amet facilisis mauris eleifend sit amet. Integer turpis enim, vulputate eget odio a, mollis feugiat orci. Proin convallis nisl ante, in ornare elit suscipit quis. Vestibulum vehicula pharetra blandit. Maecenas sit amet lorem eget dolor porttitor suscipit. Mauris volutpat molestie magna, in efficitur dui. Praesent in metus et velit iaculis pretium a ac tortor. Fusce tortor risus, bibendum eu justo vitae, commodo vulputate ipsum. In eu dui et nunc dictum auctor vitae sed risus. Cras malesuada commodo massa, in viverra est congue non. Curabitur lacus odio, placerat euismod vulputate in, fermentum porttitor magna. Aliquam at rhoncus est, ac faucibus felis. Sed viverra hendrerit hendrerit. Nulla sed enim in arcu aliquam rutrum sed sit amet leo. Donec eget elit et velit convallis laoreet vel mollis lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce non viverra mi, non ullamcorper dolor. Phasellus placerat tincidunt facilisis. Maecenas finibus varius placerat. Nunc at risus libero. Aliquam at nisl at mauris ornare dictum quis at est. Vestibulum molestie volutpat sollicitudin. Nunc quis commodo urna. Duis placerat erat ut scelerisque pharetra. Vestibulum hendrerit tristique dolor, in vulputate turpis viverra condimentum. Sed imperdiet libero vel augue pharetra, vitae gravida diam rhoncus. Aenean sit amet viverra tellus. Aliquam enim nulla, porta et elit a, imperdiet ultricies massa. Ut tortor sem, scelerisque quis velit ut, egestas ultrices massa. Nam placerat mauris vitae lectus convallis, at auctor elit facilisis. In mollis blandit sollicitudin. Proin congue ullamcorper ante, sed egestas lectus molestie eget. Sed quis erat non mi blandit fermentum. Nullam tempor turpis eu urna semper tempus. Sed nisl ligula, pretium luctus posuere nec, cursus et mi. Mauris tincidunt nisi sed justo suscipit, vel maximus libero venenatis. Donec eu convallis massa. Curabitur vel molestie magna. Nam justo lorem, interdum ac mollis vitae, mollis quis diam. Duis a rutrum tellus. Donec commodo dignissim porttitor. Aenean placerat sodales turpis ac consequat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam quis aliquet mauris, nec euismod lectus. Curabitur a turpis at nulla mattis eleifend. Duis sit amet quam id augue ornare fermentum et aliquam ipsum. Nam luctus erat ac est ultricies, ut bibendum sem laoreet. Ut neque justo, condimentum eget magna at, commodo elementum elit. Curabitur commodo scelerisque dapibus. Etiam eu leo sodales, faucibus magna vitae, consectetur magna. Nullam lobortis nec massa ut semper. Donec sed dictum orci. Praesent mollis, tortor ac pulvinar egestas, erat lectus vehicula erat, non pharetra elit felis at risus. Aliquam iaculis vel est eget iaculis. Pellentesque egestas ornare consequat. Nunc laoreet pulvinar odio in mattis. Donec convallis eget purus vel volutpat. Sed auctor enim sem, id placerat urna semper tincidunt. Mauris ac est vitae mi venenatis finibus vehicula vel ligula. Duis scelerisque rhoncus ante, dictum vehicula elit vestibulum at. Maecenas euismod tellus purus, eu eleifend ante ullamcorper id. Fusce varius sem lectus, vel lobortis dolor convallis et. Curabitur at nisl euismod purus fermentum ultrices et at risus. Pellentesque viverra, urna id malesuada euismod, nulla ligula cursus dolor, eu commodo felis metus vitae diam. Nulla convallis ante id quam elementum, vel laoreet augue condimentum. Vestibulum interdum justo id metus convallis, et fringilla velit accumsan. Nullam dui nunc, fringilla non tempor non, mollis sit amet justo. Suspendisse in lacus libero. Curabitur maximus laoreet odio, quis maximus nulla fringilla a. Nulla eget tortor non risus accumsan vulputate. Fusce aliquet diam ut risus scelerisque ornare. Aliquam tincidunt nibh sed justo porta pharetra. Ut efficitur mi lorem, quis egestas magna aliquam id. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque eu lorem ultricies, luctus elit pulvinar, fermentum augue. Ut id sem nec eros blandit lobortis ac in nibh. Aliquam erat volutpat. Aliquam vitae massa aliquet enim lacinia pulvinar a ac purus. Etiam aliquam vel mauris non consectetur. Fusce et congue magna, a dictum sapien. Ut a ex id lectus viverra viverra. Maecenas tincidunt convallis diam nec mollis. Vivamus odio erat, tempus sit amet varius ac, tincidunt nec odio. Phasellus elementum justo sit amet urna placerat, a cursus libero tempus. Phasellus euismod scelerisque urna at efficitur. Mauris a sodales est, a facilisis eros. Quisque in lectus ac purus sagittis eleifend ut id lorem. Praesent in urna vitae nisi rhoncus interdum non quis velit. Aliquam erat volutpat. Nulla ac nulla ac tortor vulputate gravida quis finibus justo. Maecenas ipsum turpis, posuere quis pulvinar at, scelerisque eu mauris. Cras vulputate tristique turpis, sed condimentum risus egestas id. Suspendisse imperdiet dolor nec purus sollicitudin, eu porttitor diam blandit. Donec viverra ex ligula, eget molestie elit aliquet suscipit. Curabitur sollicitudin est ut quam pharetra consequat. Aenean lobortis efficitur ante in vehicula. Mauris id ex in tellus sagittis pulvinar. Vestibulum nec dui iaculis, fringilla libero ut, congue neque. Duis rutrum, arcu sit amet egestas vehicula, ligula ante ultrices turpis, at pulvinar magna tellus non nulla. Duis dignissim sapien eu lacus pharetra condimentum. Vestibulum a velit volutpat, laoreet sem et, pellentesque eros. Aenean pretium, dolor vel viverra sagittis, velit nisl finibus nisl, ut porta est tortor eget arcu. Sed sodales dignissim rutrum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla maximus felis elit, at molestie augue molestie nec. Aenean in varius nisi. Nunc lacinia ex diam, vitae auctor metus tempus id. Maecenas sit amet laoreet sem. Sed ex neque, egestas facilisis nunc a, volutpat rutrum risus. Proin in posuere mauris. Quisque non mauris in nulla porttitor bibendum at nec augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec rutrum magna sed magna ultricies, nec imperdiet ligula rhoncus. Sed sit amet elit at nulla condimentum consectetur et vitae metus. Sed vitae nisi a nulla vulputate tristique. Vestibulum sagittis tortor est, ut viverra ante maximus eget. Proin auctor diam dui, a porttitor magna ultricies vehicula. Vivamus mollis magna nec sem mollis, et suscipit est tempor. Mauris risus nunc, venenatis nec condimentum non, dictum sit amet tortor. Etiam scelerisque pulvinar ipsum nec pulvinar. Suspendisse commodo mattis purus ut hendrerit. Quisque a nibh justo. Aenean mollis cursus imperdiet. Vivamus viverra mollis risus non tincidunt. Vestibulum metus augue, finibus sit amet fermentum id, suscipit id justo. Proin in fermentum mi. In sit amet arcu ipsum. Etiam ac libero eros. Proin arcu turpis, tincidunt eu blandit nec, fermentum vitae mauris. Duis mattis iaculis nulla, venenatis varius sapien pulvinar et. Mauris sodales enim at vulputate porta. Donec pharetra libero eu tellus molestie, a volutpat sem malesuada. Aliquam gravida magna eget neque posuere, non malesuada dui luctus. Cras fringilla purus malesuada felis gravida aliquet. Aliquam eu mauris vehicula, ultricies tortor at, mattis neque. Donec condimentum lobortis imperdiet. Sed ipsum justo, dictum vel nibh nec, suscipit porttitor risus. In lobortis facilisis libero, in tempor ligula. Aenean massa nunc, fringilla id porta eget, congue ac odio. Nullam a accumsan ipsum. Cras sollicitudin iaculis dignissim. Cras dignissim auctor orci nec malesuada. Maecenas auctor orci ex, vel consequat sapien vehicula ut. Aliquam felis lacus, tincidunt eu ligula non, commodo luctus tellus. Donec porttitor est ac ex suscipit ultrices. Donec sit amet purus urna. Donec vehicula ante nibh, condimentum scelerisque massa porttitor efficitur. Nam elementum purus quis arcu lacinia, nec posuere neque condimentum. Vivamus quis rhoncus nisi, scelerisque ultricies nisi. Integer a tortor mi. Duis pharetra blandit lectus, at maximus velit auctor non. Etiam iaculis, justo eget venenatis porta, tellus nibh consequat neque, quis sollicitudin massa odio lacinia elit. Aenean dignissim, diam eu dapibus convallis, turpis quam luctus mauris, ut tincidunt erat augue ac mauris. Nulla ligula lacus, imperdiet in tristique eu, feugiat et nisi. Vivamus at mi erat. Duis dictum massa sagittis est commodo, eu accumsan mi feugiat. Vivamus scelerisque leo turpis, sit amet mattis nulla luctus non.</p> <!-- The scroll to top feature --> <div class="scroll-top-wrapper "> <span class="scroll-top-inner"> <i class="fa fa-2x fa-arrow-circle-up"></i> </span> </div> </div>
.scroll-top-wrapper { position: fixed; opacity: 0; visibility: hidden; overflow: hidden; text-align: center; z-index: 99999999; background-color: #777777; color: #eeeeee; width: 50px; height: 48px; line-height: 48px; right: 30px; bottom: 30px; padding-top: 2px; border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .scroll-top-wrapper:hover { background-color: #888888; } .scroll-top-wrapper.show { visibility:visible; cursor:pointer; opacity: 1.0; } .scroll-top-wrapper i.fa { line-height: inherit; } /* Free App template for Bootstrap 3 Code snippet by maridlcrmn for Bootsnipp.com Follow me on Twitter @maridlcrmn Image credits: unsplash.com Image placeholders: placemi.com */ .mt-100 { margin-top: 100px; } .mb-100 { margin-bottom: 100px; } .icon { width: 32px; height: 32px; text-align: center; padding: 7px 8px; border: 2px solid; border-radius: 50%; }
//Thanks to: http://www.webtipblog.com/adding-scroll-top-button-website/ $(document).ready(function(){ $(function(){ $(document).on( 'scroll', function(){ if ($(window).scrollTop() > 100) { $('.scroll-top-wrapper').addClass('show'); } else { $('.scroll-top-wrapper').removeClass('show'); } }); $('.scroll-top-wrapper').on('click', scrollToTop); }); function scrollToTop() { verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0; element = $('body'); offset = element.offset(); offsetTop = offset.top; $('html, body').animate({scrollTop: offsetTop}, 500, 'linear'); } });

Related: See More


Questions / Comments: