Monday, 21 April 2014

Scroll Top by Css & JQuery

The following  example shows how scroll top will appeared automatically when vertical scroll bar appeared.

Add This in Head Section  in Aspx Page:
  <style>
        .scrollToTop{
                    width:100px;
                    height:130px;
                    padding:10px;
                    text-align:center;
                    background: whiteSmoke;
                    font-weight: bold;
                    color: #444;
                    text-decoration: none;
                    position:fixed;
                    top:465px;
                    right:40px;
                    display:none;
                    background: url('design/Arrow-Up.png') no-repeat 0px 20px;
                }
        .scrollToTop:hover{
            text-decoration:none;
        }
    </style>
    <script>
        $(document).ready(function () {

            //Check to see if the window is top if not then display button
            $(window).scroll(function () {
                if ($(this).scrollTop() > 100) {
                    $('.scrollToTop').fadeIn();
                } else {
                    $('.scrollToTop').fadeOut();
                }
            });

            //Click event to scroll to top
            $('.scrollToTop').click(function () {
                $('html, body').animate({ scrollTop: 0 }, 800);
                return false;
            });

        });
</script>

Add this in Aspx Page:
 <a href="#" class="scrollToTop">Scroll To Top</a>

No comments:

Post a Comment