I have a textarea with lots and lots of text:

<textarea cols="50" rows="10" id="txt">lots and lots of text goes here</textarea>

I want to scroll the textarea down, so the user can see 2000-th character. How can I do this using javasctipt/jQuery?

$('#txt').scrollToCharNo(2000); // something like this would be great

EDIT (my solution)

Well, I managed to make it work myself. The only way I found, is to create a DIV with the same font and width as the textarea, put a SPAN near the needed character and find the position of that span.

I am sure, that somebody might find my solution useful, so i'll paste it here:

jQuery.fn.scrollToText = function(search) {
    // getting given textarea contents
    var text = $(this).text();
    // number of charecter we want to show
    var charNo = text.indexOf(search);
    // this SPAN will allow up to determine given charecter position
    var anch = '<span id="anch"></span>';
    // inserting it after the character into the text
    text = text.substring(0, charNo) + anch + text.substring(charNo);

    // creating a DIV that is an exact copy of textarea
    var copyDiv = $('<div></div>')
                    .append(text.replace(/\n/g, '<br />')) // making newlines look the same
                    .css('width', $(this).attr('clientWidth')) // width without scrollbar
                    .css('font-size', $(this).css('font-size'))
                    .css('font-family', $(this).css('font-family'))
                    .css('padding', $(this).css('padding'));

    // inserting new div after textarea - this is needed beacuse .position() wont work on invisible elements
    copyDiv.insertAfter($(this));
    // what is the position on SPAN relative to parent DIV?
    var pos = copyDiv.find('SPAN#anch').offset().top - copyDiv.find('SPAN#anch').closest('DIV').offset().top;
    // the text we are interested in should be at the middle of textearea when scrolling is done
    pos = pos - Math.round($(this).attr('clientHeight') / 2);
    // now, we know where to scroll!
    $(this).scrollTop(pos);
    // no need for DIV anymore
    copyDiv.remove();
};


$(function (){
    $('#scroll_button').click(
        function() {
            // scrolling to "FIND ME" using function written above
            $('#txt').scrollToText('FIND ME');
            return false;
        }
    );
});

Here is a demo (it works!): /

Since none of the answers actually solved the problem, I'll accept experimentX's one: thank you for putting an effort to help me, I appreciate it!

I have a textarea with lots and lots of text:

<textarea cols="50" rows="10" id="txt">lots and lots of text goes here</textarea>

I want to scroll the textarea down, so the user can see 2000-th character. How can I do this using javasctipt/jQuery?

$('#txt').scrollToCharNo(2000); // something like this would be great

EDIT (my solution)

Well, I managed to make it work myself. The only way I found, is to create a DIV with the same font and width as the textarea, put a SPAN near the needed character and find the position of that span.

I am sure, that somebody might find my solution useful, so i'll paste it here:

jQuery.fn.scrollToText = function(search) {
    // getting given textarea contents
    var text = $(this).text();
    // number of charecter we want to show
    var charNo = text.indexOf(search);
    // this SPAN will allow up to determine given charecter position
    var anch = '<span id="anch"></span>';
    // inserting it after the character into the text
    text = text.substring(0, charNo) + anch + text.substring(charNo);

    // creating a DIV that is an exact copy of textarea
    var copyDiv = $('<div></div>')
                    .append(text.replace(/\n/g, '<br />')) // making newlines look the same
                    .css('width', $(this).attr('clientWidth')) // width without scrollbar
                    .css('font-size', $(this).css('font-size'))
                    .css('font-family', $(this).css('font-family'))
                    .css('padding', $(this).css('padding'));

    // inserting new div after textarea - this is needed beacuse .position() wont work on invisible elements
    copyDiv.insertAfter($(this));
    // what is the position on SPAN relative to parent DIV?
    var pos = copyDiv.find('SPAN#anch').offset().top - copyDiv.find('SPAN#anch').closest('DIV').offset().top;
    // the text we are interested in should be at the middle of textearea when scrolling is done
    pos = pos - Math.round($(this).attr('clientHeight') / 2);
    // now, we know where to scroll!
    $(this).scrollTop(pos);
    // no need for DIV anymore
    copyDiv.remove();
};


$(function (){
    $('#scroll_button').click(
        function() {
            // scrolling to "FIND ME" using function written above
            $('#txt').scrollToText('FIND ME');
            return false;
        }
    );
});

Here is a demo (it works!): http://jsfiddle/KrVJP/

Since none of the answers actually solved the problem, I'll accept experimentX's one: thank you for putting an effort to help me, I appreciate it!

• javascript
• jquery
• textarea
• scroll

• Please check the following question. I think that will help you. – Andrei Andrushkevich Commented Mar 28, 2011 at 12:02
• I'm afraid there is no answer to my question. How do I know the position of 2000th character? – Silver Light Commented Mar 28, 2011 at 12:20
• Why didn't you just post your own solution as an answer and accept that? – Bill the Lizard Commented May 26, 2011 at 13:05
• 1 @Bill the Lizard, I know it would be logical, but I wanted to reward people who helped me, even if their answer wasn't the exact one. – Silver Light Commented May 27, 2011 at 9:36
• Your example seems to work for with the textarea width to 99%, but not 100%, I don't understand why...? – TunaFFish Commented Mar 21, 2024 at 5:28

2 Answers 2

I am not sure if it will work. Please also check it here. It's seems working for 2000th, 1500th, and 1000th position.

EDIT confused font-size or line-height ???

 $(function (){
    var height = 2000/$('#txt').attr('cols');

    $('#txt').scrollTop(height*13);

    $('#txt').selectRange(2000,2000); //this is just to check
});

$.fn.selectRange = function(start, end) { //this is just to check 
    return this.each(function() {
        if (this.setSelectionRange) {
            this.focus();
            this.setSelectionRange(start, end);
        } else if (this.createTextRange) {
            var range = this.createTextRange();
            range.collapse(true);
            range.moveEnd('character', end);
            range.moveStart('character', start);
            range.select();
        }
    });
};

UPDATE How about this one

    var height = 1200/$('#txt').attr('cols');
    var line_ht = $('#txt').css('line-height');
    line_ht = line_ht.replace('px','');

    height = height*line_ht; 

You can use this jquery plugin