How to Develop Scroll to Top widget or Jump to Top Widget Using jquery for Blogs or Websites

This post is useful for bloggers as well as web developers for bloggers it is widget and for Developers it is jQuery tutorial. In previous articles we had discuss How to call jquery function from code behind in asp.net with C# and  How to Call C# server side Method from java script in Asp.net with C# using Jquery Ajax and JSON. For Bloggers I have collection of blogger templates. you should explore this collection may be you can find  one blogger template which suites your blog. Here is the post 10+ Free Responsive and Latest Blogger Templates that gives your blog a fresh new look, Download Free Responsive Blogger Templates of 2013., you can also visit designpicker.blogspot.in for more templates.

In this post We will discuss how to develop scroll to top widget for your blog it is really very easy. Here we develop this widget in Two part. In First Part we code in Jqurey and in second part we design this widget using CSS.

Here is the jquery  Code for scroll to Top Widget.

<script type="text/javascript">

        
        $(document).ready(function () {
            // fade in #back-top
            $(function () {
                $(window).scroll(function () {
                    if ($(this).scrollTop() > 100) {
                        $("#scrooltop").fadeIn(500);
                    } else {
                        $("#scrooltop").fadeOut(500);
                    }
                });

                // scroll body to 0px on click
                $("#scrooltop").click(function () {
                    $('body,html').animate({
                        scrollTop: 0
                    }, 800);
                    return false;
                });
            });

        });

    </script>

HTML Div tag wchich is actually displayed to scroll top

<div id="scrooltop"></div>

In above code I have put one condition if window scrolled  more than 100 than make "scrooltop" div visible with animation using fedIn([time in milliseconds]),fedOut([time in milliseconds]). when you click on "scrooltop" then

.animate({scroollTop: [Integer Value]},[Time duration in milliseconds]
}, 800); This Function will scroll your whole page to specified point in our case it is 0.
Now we will move to the second part of the widget development. In this part we will design the div using CSS you can develop this part as per your website or web blog. Here you can put image or any other styles which suites your blog but here i have used simple style which is suitable for all blogs of websites.

Here is the CSS code for  Scroll To Top Widget.

<style type="text/css">
        #scrooltop {
            background: #4E4E4E;
            text-align: center;
            position: fixed;
            bottom: 10px;
            display:none;
            right: 10px;
            cursor: pointer;
            width: 40px;
            height: 40px;
            border-radius: 1000px;
            padding: 5px;
            transition: all .3s ease-out;
        }

            #scrooltop:before {
                content: "";
                position: absolute;
                bottom: 18px;
                right: 14px;
                width: 0;
                height: 0;
                border-style: solid;
                border-width: 0 11px 16px 12px;
                border-color: transparent transparent #fff transparent;
                line-height: 0;
            }

            #scrooltop:after {
                content: "";
                position: absolute;
                bottom: 18px;
                right: 15px;
                width: 0;
                height: 0;
                border-style: solid;
                border-width: 0 10px 14px 11px;
                border-color: transparent transparent #4E4E4E transparent;
                line-height: 0;
                transition: all .3s ease-out;
            }
    </style>