• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 995
  • Last Modified:

How can I scroll a div field using javascript?

Hello experts, I have a web page with a large amount of information in a div field.  This page will be displayed on a small touch screen hand held and the default scroll buttons that come when you assign the property of overflow to a div tag are too small.  I am trying to use two buttons one to scroll up and the other to scroll down.  I have only been successful in scrolling to the top, I thought by substracting or adding to the scroll height would allow me to scroll using buttons.  Any ideas?


I know this still needs work, i will need to keep track of the current position.
function scroll_up()
{
  var div = document.getElementById('div-fork');
  h = div.scrollHeight;
  div.scrollTop = h-10;
}

function scroll_down()
{
  var div = document.getElementById('div-fork');
  h = div.scrollHeight;
  div.scrollTop = h+10;
}

<a onclick ="scroll_up();"><IMG alt="" src="images\arrowup.gif"></a><BR>
                                                      <BR>&nbsp;
                                                      <a onclick="scroll_down();"><IMG alt="" src="images\arrowdown.gif"></a></td>
                                    
0
tentavarious
Asked:
tentavarious
  • 2
  • 2
1 Solution
 
silemoneCommented:
use css   overflow:auto;
0
 
silemoneCommented:
or place anchors in page where when you click the button, it takes you to page anchor
0
 
tentavariousAuthor Commented:
I explained that overlow gives you a default scroll bar that is too small, this web page will be running on a touch screen and they want buttons to be able to scroll up or down through the list within the div tags.  Anchors will not work either.
0
 
tentavariousAuthor Commented:
What I want to happens is just like pressing the up and down arrow keys.  If I click on the div and press the down key it scrolls just like what I need.  Instead of actually pressing the arrow key I need a button on the form to do the same thing.  If I could send the the arrow key press to IE via javascript that would be perfect.
0
 
scrathcyboyCommented:
http://germ.wordpress.com/2006/04/10/scroll-div-contents-with-javascript/
ub2.underblob.com/research/js/scroll_btn.php
orums.digitalpoint.com/showthread.php?t=945898
codingforums.com/archive/index.php?t-93997.html

Those should all help, but remember, small displays are a challenge any way you do it.
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now