Javascript jQuery：将文本区域滚动到给定位置

我有一个包含大量文本的文本区：

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

编辑（我的解决方案） 嗯，我自己设法做到了。我找到的唯一方法是创建一个与textarea具有相同字体和宽度的DIV，在所需字符附近放置一个SPAN，并找到该SPAN的位置

我确信，有人可能会发现我的解决方案很有用，所以我将它粘贴到这里：

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;
        }
    );
});

jQuery.fn.scrollToText=函数（搜索）{
//获取给定的textarea内容
var text=$（this.text（）；
//我们要显示的字符数
var charNo=text.indexOf（搜索）；
//该跨度将允许最多确定给定的切割器位置
var anch=''；
//将其插入文本中字符后
text=text.substring（0，charNo）+anch+text.substring（charNo）；
//创建与textarea完全相同的DIV
var copyDiv=$（''）
.append（text.replace（/\n/g，“
”）//使换行符看起来相同
.css（'width'，$（this）.attr（'clientWidth'）//不带滚动条的宽度
.css（'font-size'，$（this）.css（'font-size'））
.css（'font-family'，$（this）.css（'font-family'））
.css（'padding'，$（this）.css（'padding'）；
//在textarea之后插入新的div-这是必需的，因为.position（）对不可见的元素不起作用
copyDiv.insertAfter（$（this））；
//SPAN上相对于父DIV的位置是什么？
var pos=copyDiv.find（'SPAN#anch'）.offset（）.top-copyDiv.find（'SPAN#anch'）.closest（'DIV'）.offset（）.top；
//滚动完成后，我们感兴趣的文本应该位于文本earea的中间
pos=pos-Math.round（$（this.attr（'clientHeight'））/2）；
//现在，我们知道在哪里滚动了！
$（此）.scrollTop（pos）；
//不再需要DIV了
copyDiv.remove（）；
};
$（函数（）{
$（“#滚动按钮”）。单击(
函数（）{
//使用上面写的函数滚动“找到我”
$（'#txt'）.scrollToText（'找到我'）；
返回false；
}
);
});

下面是一个演示（它可以工作！）：

---

由于没有一个答案真正解决了这个问题，我将接受Experitex的一个答案：谢谢你努力帮助我，我很感激

你可以使用jquery插件

我不确定它是否能工作。请也检查一下。它似乎在为第2000、1500和1000位工作

编辑字体大小或行高混乱

 $(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();
        }
    });
};

更新这个怎么样

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

    height = height*line_ht; 

---

存在问题：您无法在此处设置字符，只能设置x/y位置。我如何知道第2000个字符的坐标？只是想知道是否可以使用DOM元素-$（…）.scrollTo（$（'ul'）.get（2）.childNodes[20]，800）；在上述链接中给出的“指定目标的方式”中的选项。但我担心textarea不支持子节点属性该插件似乎不提供将教科书滚动到给定行或字符的功能。这不起作用，因为它没有考虑行高。在Chrome中，

selectRange

函数对我来说也不起作用。@而且似乎selectRange起作用了，但srcollTop也不起作用。这段代码没有考虑到不是每行长度（字符数）都等于

cols

属性，因为文字换行。@AndyE检查更新——但我仍然期望有很多错误。@SilverLight好的，如果有任何建议，我想不出其他的…：（请检查以下内容。我想这会对你有所帮助。恐怕我的问题没有答案。我怎么知道第2000个字符的位置？你为什么不把你自己的答案作为答案发布出来并接受它？@蜥蜴比尔，我知道这是合乎逻辑的，但我想奖励帮助我的人，即使他们的答案不是exac一点也不。

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

    height = height*line_ht;