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

  • 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...
  • 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 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...
  • 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...
  • 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 ...
  • 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 create Animation Using HTML & CSS
    Hii Friends... Today I explain how to create Animations using HTML and CSS . you can use this code in your project copy this code and p...
  • How To Create Image wipe Effect With CSS3 Webkit Animation
    Intoduction :- Hii Friends...   Today I explain how to create a Image wipe effect with CSS3. CSS transition and animations provide a w...
  • Create a Cart Popup div in HTML & CSS
    Intoduction :-   Hii Friends... Today I explain how to Create a Cart Popup div in HTML & CSS . This moduel base on mouse hover when y...

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