Scrolling a div with jQuery

Question

I am attempting to create a div in a container within a container which is scrollable with up and down arrows in jQuery   The only thing I can find which I wish to use was http   www dynamicdrive com dynamicindex11 scrollc2 htm  I would ve started attempting to convert that to jQuery  however it apepars to use tags like ilayer and layer  I would like to use more standard tags if possible   Any pointers in the right direction would be highly appreciated

User · Answer

There s a plug-in for this if you don t want to write a bare-bones implementation yourself  It s called  scrollTo   link   It allows you to perform programmed scrolling to certain points  or use values like -  10px for continuous scrolling   ScrollTo jQuery Plug-in

User · Answer

I know this is ages old  but upon searching for something similar this morning  and reading up on At  mix  response  as this is what we re aiming on achieving   I found this  http   www switchonthecode com tutorials using-jquery-slider-to-scroll-a-div   Just putting that there in case anyone else needs a solution

User · Answer

jCarousel is a Jquery Plugin   it have same functionality already implemented   which might want to archive  it s nice and easy  here is the link    and complete documentation can be found here

User · Answer

I was looking for this same answer and I couldn t find anything that did exactly what I wanted so I created my own and posted it here   http   seekieran com 2011 03 jquery-scrolling-box   Working Demo  http   jsbin com azoji3  Here is the important code   function ScrollDown         var topVal       up   parents   container   find   content   css  top   replace    - d    g         var topVal       content   css  top   replace    - d    g           topVal   parseInt topVal     console log     content   height          topVal     if Math abs topVal   lt       content   height   -     container   height     60      This is to limit the bottom of the scrolling - add extra to compensate for issues       up   parents   container   find   content   stop   animate   top  topVal - 20     px    slow        if  mouseisdown  setTimeout ScrollDown  400         Recursion to make it happen        dn   mousedown function event        mouseisdown   true      ScrollDown       mouseup function event        mouseisdown   false        Thanks to Jonathan Sampson for some code to start but it didn t work initially so I have heavily modified it  Any suggestions to improve it would be great here in either the comments or comments on the blog

User · Answer

I don t know if this is exactly what you want  but did you know you can use the CSS overflow property to create scrollbars   CSS   div box    width  200px    height  200px    overflow  scroll      HTML    lt div class  box  gt    All your text content     lt  div gt

User · Answer

This worked for me    lt html gt   lt head gt   lt title gt scroll lt  title gt    lt script src  http   ajax googleapis com ajax libs jquery 1 2 6 jquery min js  type  text javascript  gt  lt  script gt    lt  head gt   lt body gt    lt style gt  div container     overflow hidden    width 200px    height 200px    div content     position relative    width 200px    height 200px      overflow hidden    top 0     lt  style gt    lt div class  container  gt     lt p gt       lt a href  javascript up     gt  lt img src   images img flecha left png  class  up    gt  lt  a gt       lt a href  javascript down     gt  lt img src   images img flecha left png  class  down    gt  lt  a gt         lt  p gt     lt div class  content  gt       lt p gt Hello World lt  p gt  lt p gt Hello World lt  p gt       lt p gt Hello World lt  p gt       lt p gt Hello World lt  p gt       lt p gt Hello World lt  p gt       lt p gt Hello World lt  p gt       lt p gt Hello World lt  p gt       lt p gt Hello World lt  p gt       lt p gt Hello World lt  p gt     lt  div gt   lt  div gt    lt script gt  function up         var topVal       content   css  top      alert topVal       var val parseInt topVal replace  px            val val-20          content   css  top   val  px          function down         var topVal       content   css  top      alert topVal       var val parseInt topVal replace  px            val val 20          content   css  top   val  px         lt  script gt   lt  body gt   lt  html gt

User · Answer

Relatively-position your content div within a parent div having overflow hidden  Make your up down arrows move the top value of the content div  The following jQuery is untested  Let me know if you require any further assistance with it as a concept   div container     overflow hidden    width 200px    height 200px    div content     position relative    top 0      lt div class  container  gt     lt p gt       lt a href  enablejs html  class  up  gt Up lt  a gt          lt a href  enablejs html  class  dn  gt Down lt  a gt     lt  p gt     lt div class  content  gt       lt p gt Hello World lt  p gt     lt  div gt   lt  div gt     function          container a up   bind  click   function        var topVal     this  parents   container   find   content   css  top          this  parents   container   find   content   css  top   topVal-10                container a dn   bind  click   function        var topVal     this  parents   container   find   content   css  top          this  parents   container   find   content   css  top   topVal 10

User · Answer

An excellent plug-in is jscrollpane

[javascript] Scrolling a div with jQuery

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to css