Asp.net modules
  • Home
  • c# Modules
  • Web Design
    • Html
    • Css
    • Java Script
  • Bootstrap
  • Sql
    • Queries
    • Stored Procedures
  • About Me
    • About Myself
    • My Projects
    • My Resume
  • Photo Gallery

Monday, January 9, 2017

How To scroll from bottom to top

 Unknown     3:10 AM     js     1 comment   

Intoduction :-
Hii Friends... 

Today I explain How To scroll from top to bottom and bottom to top, we use “scrollTop” function of jquery. In order to make the Scroll to Bottom action smooth,
jQuery animation has been used. The jQuery scrollTop property is used to set the position of the browser Scrollbar. The page is scrolled to Top or Bottom position
by setting the scrollTop property.Through this button, we can back to the top section from the bottom section of the web page without manual page scrolling.


Example :-
<img src="img/BackToTopArrow.png" class="on-click-scroll-page-image" title="Go To Top" />


<style>
.on-click-scroll-page-image
        {
            max-width:50px;
            position:fixed;
            cursor:pointer;
            bottom:5px;
            right:5px;
            display:none;
        }

</style>

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script>

        $(document).ready(function () {
            $(window).scroll(function () {
                if ($(window).scrollTop() > 10) {
                    $('.on-click-scroll-page-image').show();
                }
                else {
                    $('.on-click-scroll-page-image').hide();
                }
            });
            $('.on-click-scroll-page-image').click(function () {  
                    $("html, body").animate({ scrollTop: 0 }, 600);
                    return false;
                         });
        });

    </script>
  • Share This:  
  •  Facebook
  •  Twitter
  •  Google+
Email ThisBlogThis!Share to XShare to Facebook
Newer Post Older Post Home

1 comment:

  1. UnknownJanuary 11, 2017 at 9:06 PM

    Nic one...

    ReplyDelete
    Replies
      Reply
Add comment
Load more...

Popular Posts

  • Angular Directives
    Intoduction :-   Hii Friends... Today I explain about Angular Directives.  1) Angular JS use new attribute i.e called Directives. 2)...
  • Angular Expressions
    Intoduction :-   Hii Friends... Today I explain about angular js expressions. this is similar to JavaScript expressions. 1) The expr...
  • Bounce a circle with Css
    Intoduction :-   Hii Friends... Today I explain how to make a bouncing circle with the help of css.  DEMO:- ...
  • How To Make Semi-Transparent Buttons
    Intoduction :-   Hii Friends...   Today I explain how to make Semi-Transparent Buttons with the help of css. This style now a days goes t...
  • How To Make A Calculator In Html
    Intoduction :- Hii Friends... Today I explain how to make a calculator with html. So here i explain this step by step. Step : 1    Th...
  • Basic of css.
    Introduction :- Hii Friends..   Today I explain what is Css and why we use Css and the basic structure of css. so here I               ...
  • How to make over-out event with js
    Intoduction :- Hii Friends... Today I explain how to make over-out event with the help of java-script.  In asp.net there are many events li...
  • Awarepedia services
    Intoduction :-   Hii Friends...   Today I explain services of awarepedia.com  . Awarepedia is a online software development company and the...
  • How to make color picker
    Intoduction :-   Hii Friends... Today i going to put a very interesting module i.e how to make a color picker module. Its very interesti...
  • css Hovering Bounce
    Intoduction :-   Hii Friends... Today I explain how to make css hovering fill circle  boundary with images bounce . hover selector is us...

Blog Archive

  • ▼  2017 (13)
    • ►  December (1)
    • ►  March (5)
    • ►  February (1)
    • ▼  January (6)
      • CSS3 image and List hover effects
      • CSS3 image and text hover effects
      • CSS3 image hover effects
      • jQuery image slider with three panels and 3D look
      • How to get all tables, Procedures, triggers, objec...
      • How To scroll from bottom to top
  • ►  2016 (31)
    • ►  November (1)
    • ►  September (1)
    • ►  June (6)
    • ►  May (3)
    • ►  April (2)
    • ►  March (8)
    • ►  February (9)
    • ►  January (1)
  • ►  2015 (31)
    • ►  December (3)
    • ►  November (4)
    • ►  October (18)
    • ►  September (6)

About Me

Unknown
View my complete profile

Copyright © Asp.net modules | Powered by Blogger
Design by Sheetal Khandelwal