Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • scrollTop() method in jQuery

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 268
    Comment on it

    scrollTop() method:

    It is used to get the vertical scrollbar position for the selected html elements and once we get the scrollbar position we can use it in our jquery.

    Syntax:

    $(selector).scrollTop()  // returns vertical scrollbar position

    JQuery code to scroll to top in a page:

    $(document).ready(function() {
            // It show or hide the scroll to top button
            $(window).scroll(function() {
              if ($(this).scrollTop() > 210) {
                $('.go-top').fadeIn(200);
              } else {
                $('.go-top').fadeOut(200);
              }
            });
          
            // Animate the scroll to top
            $('.go-top').click(function(event) {
              event.preventDefault();
              
              $('html, body').animate({scrollTop: 0}, 300);
            })
          });

    In the above jquery code when scrollTop value is less than 210 then the scroll to top button will not visible and if value is greater than 210 than the button will be visible to user.

    Working Example: https://jsfiddle.net/dp2novvz/

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: