C# Jadu
  • Home
  • Asp.net
  • Web Design
    • Html
    • Css
    • Java Script
  • Bootstrap
  • Sql
    • Queries
    • Stored Procedures
  • About Me
    • About Myself
    • My Projects
    • My CV
  • Gallery
  • Do you Know?

Monday, 30 January 2017

How to make bottom to top scroll

 Deepak Chaudhary     21:25     Css, Html, 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.

DEMO : Please see the bottom of the page it will visible when you scroll down.


C# JADU

C# JADU Go To Top

Example :-

<html>
<head>
<style>
.on-click-scroll-page-image
        {
            max-width:50px;
            position:fixed;
            cursor:pointer;
            bottom:10px;
            right:10px;
            display:none;
        }
</style>
<script src="https://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>
</head>
<body>
<p>C# JADU<p>
<br/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvDYNWUMqSCAUcQnqz_zD816SaSOcBOAShkyS6G2r_nu1dyP8CdWFsak6PGKfxmlKMPtfTYOHNss8kWqVejx9OXru38tS9C9Hpz9W7EhbYLg_8g3D0a6vvewkiEOIrascJV5VtuFkdN9fQ/w140-h67-p/finalc%2523logoPNGupdated.png "> <br />
<p>C# JADU<p>

<a href="#" class="on-click-scroll-page-image">Go To Top </a>
</body>
</html>
  • Share This:  
  •  Facebook
  •  Twitter
  •  Google+
Email ThisBlogThis!Share to XShare to Facebook
Newer Post Older Post Home

1 comment:

  1. Unknown3 February 2017 at 21:02

    http://dotnetmodules.blogspot.in/2017/01/how-to-scroll-from-bottom-to-top.html


    for more examples go here..

    ReplyDelete
    Replies
      Reply
Add comment
Load more...

Most Popular posts

  • How To Create Image wipe Effect With CSS3 Webkit Animation
    Hi Friends... In this article we learn how to create a Image wipe effect with CSS3. CSS transition and animations provide a way for web de...
  • CSS 3D Cube
    Hi Friends... CSS cubes really showcase what CSS has become over the years, evolving from simple color and dimension directives to a lang...
  • CSS 3D Transforms
    Hi Friends... There is nothing more flashy and full with eye-candy than an impressive 3D CSS demo. Although its utility outside of demos ...

About Me

Deepak Chaudhary
View my complete profile

Copyright © C# Jadu | Powered by Blogger
Design by Deepak Chaudhary