Responsive back to top using Bootstrap

http://www.2my4edge.com/2015/03/responsive-back-to-top-using-bootstrap.html

 

 

Responsive back to top using Bootstrap

Back to top using bootstrap, we already discussed some tutorials about bootstrap. Bootstrap makes the work very simple like that, to we are going to see about back to top onclick using Bootstrap with some script. This is one of the simple method to use this scroll top function.  let me explain you in details.
Responsive back to top in bootstrap

DOWNLOAD                     LIVE DEMO
already i did with same concept on back to top like Animated scroll to top by using Jquery, but that is with jquery without bootstrap so that is not responsive. but this one is responsive, because we are using Bootstrap. let see the coding.
CSS & JQUERY + BOOTSTRAP
//code.jquery.com/jquery-1.10.2.min.js
//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20js/bootstrap.min.js
<link href="//maxcdn.bootstrapcdn.com/bootstrap/
    3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<style type="text/css">
.back-to-top {
cursor: pointer;
position: fixed;
bottom: 0;
right: 20px;
display:none;
}
</style>
HTML

..................... ..................... .....................
S No Title
.............. ..............
</div> </div> <a id="back-to-top" href="#" class="btn btn-primary btn-lg back-to-top" role="button" title="Back to Top" data-toggle="tooltip" data-placement="top"> <span class="glyphicon glyphicon-chevron-up"></span> </a>
SCRIPT
    $(document).ready(function(){
     $(window).scroll(function () {
            if ($(this).scrollTop() > 50) {
                $('#back-to-top').fadeIn();
            } else {
                $('#back-to-top').fadeOut();
            }
        });
        // scroll body to 0px on click
        $('#back-to-top').click(function () {
            $('#back-to-top').tooltip('hide');
            $('body,html').animate({
                scrollTop: 0
            }, 800);
            return false;
        });
        
        $('#back-to-top').tooltip('show');
});

we can change that 800 to any time, and that  > 50 is for pixels, if we come below more than 50px of your browser, that back to top will be appear. we can change that as we need. I think it is really helpful and simple for back to top. thanks for you attention.
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s