javascript - jQuery fading "Back To Top" link

Here i am explaining how to add javascript - jQuery fading "Back To Top" link

We need to style and position it. Here I’m setting its position to fixed and adding the image of "Back To Top". I also added the Fade In and Fade Out effect.

Script

//Add This Jquery CDN

<script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.1.min.js">
 </script>

//A Simple FadeIn and FadeOut Effect Back to top

<script type="text/javascript">
        $(function() {
            $(window).scroll(function() {
                if ($(this).scrollTop() != 0) {
                    $("#toTop").fadeIn();
                }
                else {
                    $("#toTop").fadeOut();
                }
            });
            $('#toTop').click(function() {
                $('body,html').animate({ scrollTop: 0 }, 800);
            });
        });
</script>

CSS

<style type="text/css">
        #toTop
        {
            position: fixed;
            bottom: 50px;
            right: 30px;
            width: 180px;
            height:100px;
            padding: 5px;         
            cursor:pointer;
            display: none;
        }
</style>

 

HTML

//This is the Fixed div

<div id="toTop">

        <img src="images/BackToTopArrow.png" style="width: 250px;
            height:100px;" alt="back to top" title="back to top" />
</div>

If you have any query feel free to comment it will be appriciated :)