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 Expressions
    Intoduction :-   Hii Friends... Today I explain about angular js expressions. this is similar to JavaScript expressions. 1) The expr...
  • 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 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...
  • Awarepedia services
    Intoduction :-   Hii Friends...   Today I explain services of awarepedia.com  . Awarepedia is a online software development company and the...
  • Css hovering fill circle boundary
    Intoduction :-   Hii Friends... Today I explain how to make css hovering fill circle. hover selector is used to select elements when you ...
  • Asp.net insert, Edit, update, delete in grid view
    Introduction :   Here I explain how to insert, edit, update and delete data in grid view using asp.net. In this project I use so...
  • stored procedure with case and actions
    Intoduction :- Hii Friends... Today I  explain how to use case and action in stored procedure .  CREATE Proc [dbo].[Proc_ManageRatingA...
  • How to create pikachu character using HTML & CSS
    Hii Friends... Today I explain how to create cartoon( Pikachu character) using HTML and CSS . you can use this code in your project cop...
  • css Hovering Bounce
    Intoduction :-   Hii Friends... Today I explain how to make css hovering fill circle  boundary with images bounce . hover selector is us...
  • Bounce a circle with Css
    Intoduction :-   Hii Friends... Today I explain how to make a bouncing circle with the help of css.  DEMO:- ...

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