I have a textarea with many lines of input, and a JavaScript event fires that necessitates I scroll the textarea to line 345.

scrollTop sort of does what I want, except as far as I can tell it's pixel level, and I want something that operates on a line level. What also complicates things is that, afaik once again, it's not possible to make textareas not line-wrap.

I have a textarea with many lines of input, and a JavaScript event fires that necessitates I scroll the textarea to line 345.

scrollTop sort of does what I want, except as far as I can tell it's pixel level, and I want something that operates on a line level. What also complicates things is that, afaik once again, it's not possible to make textareas not line-wrap.

• javascript
• html
• css

• Could you give a bit more background on what you are trying to do. In particular, does it definatly have to be a textarea? ie. will users be editing its contents? – SpoonMeiser Commented Sep 30, 2008 at 22:16

3 Answers 3

You can stop wrapping with the wrap attribute. It is not part of HTML 4, but most browsers support it.
You can compute the height of a line by dividing the height of the area by its number of rows.

<script type="text/javascript" language="JavaScript">
function Jump(line)
{
  var ta = document.getElementById("TextArea");
  var lineHeight = ta.clientHeight / ta.rows;
  var jump = (line - 1) * lineHeight;
  ta.scrollTop = jump;
}
</script>

<textarea name="TextArea" id="TextArea" 
  rows="40" cols="80" title="Paste text here"
  wrap="off"></textarea>
<input type="button" onclick="Jump(98)" title="Go!" value="Jump"/>

Tested OK in FF3 and IE6.

If you use .scrollHeight instead of .clientHeight, it will work properly for textareas that are shown with a limited height and a scrollbar:

<script type="text/javascript" language="JavaScript">
function Jump(line)
{
  var ta = document.getElementById("TextArea");
  var lineHeight = ta.scrollHeight / ta.rows;
  var jump = (line - 1) * lineHeight;
  ta.scrollTop = jump;
}
</script>

<textarea name="TextArea" id="TextArea" 
  rows="40" cols="80" title="Paste text here"
  wrap="off"></textarea>
<input type="button" onclick="Jump(98)" title="Go!" value="Jump"/>

Something to consider when referring to the accepted answer: you may not have specified the rows attribute in your textarea e.g. instead, you may have set the height of the textarea using CSS.

Therefore referring to ta.rows will not work as per above (it's 2 by default), so instead you could get the line-height of your textarea via currentStyle / getComputedStyle or even jQuery's .css(), and do something like the following:

function jump(line) {
  var ta = document.getElementById("TextArea");
  var jump = line * parseInt(getStyle(ta, 'line-height'), 10);
  ta.scrollTop = jump;
}

function getStyle(el, styleProp) {
  if (el.currentStyle) {
    var y = el.currentStyle[styleProp];
  } else if (window.getComputedStyle) {
    var y = document.defaultView.getComputedStyle(el, null).getPropertyValue(styleProp);
  }
  return y;
}