Smooth Scroll to Top Button for Blogs and Websites

Smooth jQuery Scroll to Top for Blogs and Websites

Have you visited any website and saw a button appearing when you scroll a bit down? And when you click on it, it scrolls up right? Well, that's called a Scroll to Top button. We make use of simple jQuery script to get this button working i.e, smooth scrolling from bottom of the page to the top. We shall now see how to integrate this button onto your websites or blogs.

Integrate Smooth Scroll to Top Button

First of all, since it is a jQuery function, you need to include the jQuery script file inside the <head> tag of your website. To do that, just include this single line code in between the <head> tag of your website or blog pages. You don't have to include this if you already use other jQuery functions on your site.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
 Next, to show the button, you will have to include another piece of code in your <body> tag. The code is
<a href="#" class="typtipstotop"></a>
Now before going to the functions part, let's just set the style of the button. To do that, copy and paste the following in the <head> tag of your website.

<style type='text/css'>
.typtipstotop{
    width: 45px;
    height: 45px;
    position:fixed;
    bottom:30px;
    right:50px;
    display:none;
    text-indent:-9999px;
    background: url('http://2.bp.blogspot.com/-n8tgTsyCQys/UPt9ifx30LI/AAAAAAAAABY/FNne7r8p6Pk/s1600/typtipstotop.png') no-repeat;
-webkit-transition: background 1s;
-moz-transition: background 1s;
-ms-transition: background 1s;
-o-transition: background 1s;
transition: background 1s;
}
.typtipstotop:hover{background: url('http://3.bp.blogspot.com/-YAi_2wANuJQ/UPt9jZUmYLI/AAAAAAAAABk/Ogcrb-1OtRw/s1600/typtipstotoph.png') no-repeat;}
</style>

Here, you can change the design of the button by replacing the background url, and set the button width and height according to the button size you are using. And you can change the placement of the image on the screen by changing the right and bottom sizes in the above code.

Now lets add the jQuery script to get the smooth scrolling effect. To do that, all you have to do is just copy and paste the below code in between the <head> tag of your site.

<!-- ### Scroll to Top by Typical Tips and Gazpo ### -->
<script type="text/javascript">
    $(document).ready(function(){

        $(window).scroll(function(){
            if ($(this).scrollTop() > 100) {
                $('.typtipstotop').fadeIn();
            } else {
                $('.typtipstotop').fadeOut();
            }
        });

        $('.typtipstotop').click(function(){
$("html, body").animate({ scrollTop: 0 }, 600);
            return false;
        });

    });
</script>

Now,
  • 100 makes the scroll button appear after the viewer scrolls down by 100px from the top
  • 0 makes the scrolling to reach the absolute top of the page
  • 600 is the time in milliseconds that the button takes to complete scrolling to top

Modify these values according to your needs and get your personalized scrolling effect up and running.

Stumbled into any problems? Let us know.

0 comments:

Post a Comment

Singapore Top Web & Mobile Development Company

Trending

Find Your Site on Google

Stay Updated with Newsteller
Copyright © 2013 Typical Tips. All Rights Reserved
About Us | Services