codedecoder

breaking into the unknown…

page vertical auto scroll jquery

1 Comment

One of my form have many inputs and user need to scroll down to reach till the end of form. I need to implement auto scrolling, for the page, so that when user, reach a input filed at the bottom of page, it automatically scroll up to expose the remaining fields. Below is the code, which use jQuery animate to implement vertical auto scroll. We have scroll_to method, which take two argument base and target . base is the element to be animated, target is used to calculate height from top , we need to scroll up . So, say as in  below example, when user click on city input box which is at the bottom, the page will move up, taking city input to top of the page, So exposing other input element below it. Similarly, I have a popup in which designation input is at bottom, so scroll_top is called on it. like $(‘html,body’) or $(‘.modal-body’) you can trigger auto_scroll on any element, provided that element have certain height set,which is less then required by whole content, triggering the scrollbar.

jQuery(function(){

   $(document).ready(function(){
     #when user click on city input scroll_to method will be called, which will
      scroll the city input to the top, showing all other input below it
     $("#city").on('focus',function(){
     scroll_to($('html,body'), $(this));
     });
     #when user click on designation input in the popup scroll_to method will be called, 
     which will scroll the city input to the top, showing all other input below it
     $("#designation").on('focus',function(){
     scroll_to($('.modal-body'), $(this));
     });
  })

  function scroll_to(base, target){
    base.animate({
    scrollTop: target.position().top
     },1000);
    }
})

I have implemented, the autoscroll basically for my popup. The problem, I faced there is that, the target(designation input) top position keep changing with each scroll. say, first time the popup get open, I clicked designation input (say it is 500px below the top), it moved up, so now it is 0 px from top, now you close the popup, again open the popup, now this time scroll not work as, it will try to move 0 px, which is equal to no scroll. So, I modified the scroll_to method as below.

function scroll_to(base, target){
   base.animate({
      scrollTop: target.position().top + parseInt(base.scrollTop())
   },1000);
}

Here, the height to scroll, will be sum of target position and height of the scroll relative to the base.

If, above auto scroll, don’t solve your problem. jQuery plugins are available with advance functionality. checkout this for vertical scroll and this for horizontal scroll

Referance:

http://stackoverflow.com/questions/4034659/is-it-possible-to-animate-scrolltop-with-jquery

http://api.jquery.com/offset/

http://api.jquery.com/position/

http://stackoverflow.com/questions/3202008/jquery-difference-between-position-and-offset

http://api.jquery.com/animate/

http://api.jquery.com/scrollTop/

Advertisements

Author: arunyadav4u

over 7 years experience in web development with Ruby on Rails.Involved in all stage of development lifecycle : requirement gathering, planing, coding, deployment & Knowledge transfer. I can adept to any situation, mixup very easily with people & can be a great friend.

One thought on “page vertical auto scroll jquery

  1. Thanks buddy. I resolved my issue by taking help from your blog.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s