scroll up and down a div on button click using jquery

Question

I am trying to add a feature to scroll up and down a div based on button click  I was able to do the scroll down part easily  but got stuck wit the scroll up part and one more concern was a scenario  which I will explain   Click on  Go Down  button   and if I manually scroll down dragging down the scroll bar   and now if I click on Go Down button again  the scroll bar will go to the previous position  as the variable assigned with the value for scrolling has an old value insteading of detecting current position of scroler   I will add a jsfiddle link to show my work and also paste the code  What could I be doing wrong wit the scroll up option too    http   jsfiddle net xEFq5 7   var scrolled 0     document  ready function          downClick   on  click   function        scrolled scrolled 300           cover   animate           scrollTop   scrolled                    upClick   on  click   function        scrolled scrolled-300           cover   animate           scrollBottom   scrolled                    clearValue   on  click   function        scrolled 0               lt div class  header  gt  lt button id  upClick  gt Go Up lt  button gt   lt button id  downClick  gt Go Down lt  button gt  lt button class  clearValue  gt Clear Value lt  button gt   lt  div gt      lt div class  cover  gt  lt div class  rightSection  gt  lt  div gt  lt  div gt    also is there a good plugin which has this functionality

User · Accepted Answer

scrollBottom is not a method in jQuery   UPDATED DEMO - http   jsfiddle net xEFq5 10   Try this          upClick   on  click   function         scrolled scrolled-300              cover   animate             scrollTop   scrolled

User · Answer

To solve your other problem  where you need to set scrolled if the user scrolls manually  you d have to attach a handler to the window scroll event  Generally this is a bad idea as the handler will fire a lot  a common technique is to set a timeout  like so   var timer   0    window  scroll function       if  timer        clearTimeout timer         timer   setTimeout function         scrolled     window  scrollTop         250

User · Answer

Where did it come from scrollBottom this is not a valid property it should be scrollTop and this can be positive    or negative -  values to scroll down    and up -   so you can change   scrollBottom    to this scrollTop       upClick   on  click   function          scrolled   scrolled - 300           cover   animate           scrollTop  scrolled                  ------------------------------this one

User · Answer

Just to add to other comments - it would be worth while to disable scrolling up whilst at the top of the page  If the user accidentally scrolls up whilst already at the top they would have to scroll down twice to start  if scrolled    0         upClick   on  click   function         scrolled scrolled-300              cover   animate             scrollTop   scrolled

User · Answer

You can use this simple plugin to add scrollUp and scrollDown to your jQuery  https   github com phpust JQueryScrollDetector

User · Answer

For the go up  you just need to use scrollTop instead of scrollBottom       upClick   on  click   function          scrolled   scrolled - 300          cover   stop   animate           scrollTop  scrolled               Also  use the  stop   method to stop the currently-running animation on the cover div  When  stop   is called on an element  the currently-running animation  if any  is immediately stopped   FIDDLE DEMO

User · Answer

Scrolling div on click of button   Html Code -    lt div id  textBody  style  height 200px  width 600px  overflow auto   gt       lt  ------Your content---- gt    lt  div gt    JQuery code for scrolling div -    function             upBtn    click function              textBody   scrollTop     textBody   scrollTop  -20                downBtn    click function             textBody   scrollTop     textBody   scrollTop   20

[jquery] scroll up and down a div on button click using jquery

Examples related to jquery

Examples related to scroll