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

<!-- 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> <header class="header"> <div class="container"> <div class="row"> <div class="col-md-5 col-md-offset-1"> <div class="content"> <div class="pull-middle"> <h1 class="page-header">Scroll to top feature</h1> <p>PERFECT from mobile devices</p> <p><a href="http://bootsnipp.com/iframe/GX14E" target="_blank">View this Bootsnipp in full screen</a></p> <p class="lead">Just scroll down, and a Back to Top button will appear</p> <p><a href="https://validator.w3.org/nu/?showsource=yes&doc=http%3A%2F%2Fbootsnipp.com%2Fiframe%2FGX14E">HTML5 validator</a></p> <div class="panel panel-default"> <div class="panel-body"> <form action="#" role="form"> <div class="input-group"> <input type="email" class="form-control" placeholder="Email Address" required> <span class="input-group-btn"> <button class="btn btn-success btn-circle" type="submit">Sign up for free</button> </span> </div> </form> </div> </div> </div> </div> </div> <div class="col-md-4 col-md-offset-1 text-center mt-100 mb-100"> <div class="phone"> <img class="img-responsive img-rounded" src="http://placemi.com/djlnr/263x480" alt=""> </div> </div> </div> </div> </header> <section class="section"> <div class="container"> <div class="row"> <div class="col-md-4 col-md-offset-1 text-center mt-100 mb-100"> <div class="phone"> <img class="img-responsive img-rounded" src="http://placemi.com/djlnr/263x480" alt=""> </div> </div> <div class="col-md-5 col-md-offset-1"> <div class="content"> <div class="pull-middle"> <h2 class="h1 page-header">Discover more about features.</h2> <ul class="media-list"> <li class="media"> <a class="media-left" href="#"> <span class="glyphicon glyphicon-cloud icon text-success"></span> </a> <div class="media-body"> <h3 class="media-heading">Praesent porttitor urna ut enim.</h3> <p>Maecenas vitae ex iaculis, efficitur est eu, fermentum quam.</p> </div> </li> <li class="media"> <a class="media-left" href="#"> <span class="glyphicon glyphicon-lock icon text-success"></span> </a> <div class="media-body"> <h3 class="media-heading">Cras consequat est et elit.</h3> <p>Integer suscipit massa at tellus semper, at aliquam ante bibendum.</p> </div> </li> <li class="media"> <a class="media-left" href="#"> <span class="glyphicon glyphicon-user icon text-success"></span> </a> <div class="media-body"> <h3 class="media-heading">Aenean vel enim quis dui blandit.</h3> <p>Maecenas vitae ex iaculis, efficitur est eu, fermentum quam.</p> </div> </li> </ul> </div> </div> </div> </div> </div> </section> <section class="section"> <div class="container"> <div class="row"> <div class="col-md-3 text-right"> <div class="content"> <div class="pull-middle"> <h4><strong>Describe your product.</strong></h4> <p>Proin sapien neque, consequat ac tempus aliquam, gravida in urna. Phasellus et lectus in odio imperdiet tempus. Aenean posuere, nunc a tristique imperdiet, massa dolor dictum eros, sit amet tempor turpis turpis vel tortor.</p> <small>Phasellus feugiat at lorem a tincidunt. Nam hendrerit leo vitae orci pellentesque, nec euismod dolor condimentum.</small> </div> </div> </div> <div class="col-md-4 col-md-offset-1 mt-100 mb-100"> <div class="phone"> <img class="img-responsive img-rounded" src="http://placemi.com/djlnr/263x480" alt=""> </div> </div> <div class="col-md-3 col-md-offset-1"> <div class="content"> <div class="pull-middle"> <h4><strong>Even more stuff.</strong></h4> <p>Proin sapien neque, consequat ac tempus aliquam, gravida in urna. Phasellus et lectus in odio imperdiet tempus. Aenean posuere, nunc a tristique imperdiet, massa dolor dictum eros, sit amet tempor turpis turpis vel tortor.</p> <a class="btn btn-success btn-circle" href="#">Sign up for free</a> </div> </div> </div> </div> </div> </section> <footer class="footer text-center"> <div class="container"> <small>© Copyright 2015. Crafted with love by <a href="https://www.twitter.com/maridlcrmn">@maridlcrmn</a></small> </div> </footer> <!-- 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%; } .header { padding-top: 50px; background-color: #eee; overflow: hidden; } .footer { color: #887; background-color: #eee; padding-top: 30px; padding-bottom: 30px; } .content { position: relative; display: table; width: 100%; min-height: 100vh; } .pull-middle { display: table-cell; vertical-align: middle; } .btn { padding-left: 25px; padding-right: 25px; } .btn-circle { border-radius: 20px; } .input-group input { border: 0; box-shadow: none; padding-right: 30px; } .input-group input:focus, .input-group input:active { outline: 0; box-shadow: none; } .input-group-btn:last-child>.btn { z-index: 2; margin-left: -18px; border-radius: 20px; } .phone { position: relative; max-width: 263px; margin: 0 auto; padding: 65px 15px 55px; border: 2px solid #ddd; border-radius: 20px; background-color: #222; box-shadow: 20px 20px 40px #887; }
//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'); } });

Similar snippets: See More


Comments:

comments powered by Disqus