javascript - 单击网页中的上一个和下一个超链接时向上/向下滚动文本区域

Question

我想显示一个超链接“上一个”“下一个”。单击“下一个超链接”应将 textarea 滚动到下一个位置。单击“prev”超链接应将 textarea 滚动到上一个位置。

在 textarea 中跳转的位置是已知的，例如 line: 10，然后 line 40 , 50 , 70 , 101 , .... textarea 有一个固定的高度。

Answer 1

您可以使用分页。我更喜欢使用带有 jquery 的样式分页-

http://flaviusmatis.github.com/simplePagination.js/#page-20

这将帮助你确定。根据您想要下一步的需要，您需要为当前文本块提供位置，或者您可以使用margin属性。

Answer 2

试试这个：- http://jsfiddle.net/MCK8g/

$(function(){

    $("#prev").on("click",function(){
        $("html, body").animate({ scrollTop: -500 + window.pageYOffset }, 600);
    });

     $("#next").on("click",function(){
         $("html, body").animate({ scrollTop: 500 + window.pageYOffset }, 600);
    });
});

根据所需的滚动更改系数“500”。

Answer 3

谷歌搜索，第一次点击..

function scrollToLine($textarea, lineNumber) {
  var lineHeight = parseInt($textarea.css('line-height'));
  $textarea.scrollTop(lineNumber * lineHeight);      
}

https://makandracards.com/makandra/8247-scroll-a-textarea-to-a-given-line-with-jquery

（解决方案是使用 jQuery）

如前所述，它们仅在以像素为单位设置行高时才有效，如果没有，则帖子中还提供了带有解决方法的链接，请参见

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