1.1 问题描述

分析/填报页面做出的报表由于没有分页，通常页面较大，而有些场景要求在页面加载后自动滚动到浏览器最下方或最右侧，方便查看或填报最新的数据。实现效果如下图，页面加载后滚动条自动滚动到最下方和最右侧了。

1.2 实现思路

contentPane.$contentPane.scrollTop()//指定页面滚动条的最上方位置

contentPane.$contentPane.scrollLeft()//指定页面滚动条的最左侧位置

上述方法针对未添加冻结的报表，使用了填报冻结的报表无法奏效，这时需要获取到非冻结区的宽度和高度并赋值。

2.1 示例一：未设置冻结的报表

打开模板：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Form\LineForm\插入删除行重新编号.cpt

点击模板>模板 Web 属性>填报页面设置，选择为该模板单独设置，然后添加加载结束事件，如下图：

代码如下：

setTimeout(function(){
  var y=contentPane.$contentPane[0].scrollHeight;//获取页面最大高度
  var x=contentPane.$contentPane[0].scrollWidth;//获取页面最大宽度
  contentPane.$contentPane.scrollLeft(x);//设置滚动条最左方位置
  contentPane.$contentPane.scrollTop(y);//设置滚动条最上方位置
},100)

注：之所以使用 setTimeout() 延时函数，是因为在页面加载结束时，有些情况下设置不成功，这样用兼容性更好。

在其他需求中，可能需要控件滚动条在不同的位置，比如多sheet应用中，需要在切换 sheet 后页面滚动条回到最上方，可以直接在切换 sheet 事件中使用contentPane.$contentPane.scrollTop(0)，恢复默认滚动条位置。切换 sheet的 JS 写法可以参考 JS 实现切换 sheet 时隐藏或显示参数面板

2.2 示例二：设置了冻结的报表

仍以%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Form\LineForm\插入删除行重新编号.cpt为例。

设置第二行为冻结行。模板>重复与冻结设置；设置如下图所示：

具体可以参考 重复与冻结设置。

修改加载结束事件。如下图所示：

代码如下：

setTimeout(function(){ 
var a=$("#frozen-center")[0]; 
var y=a.scrollHeight;//获取页面最大高度 
var x=a.scrollWidth;//获取页面最大宽度 
a.scrollLeft=x; 
a.scrollTop=y; 
},100)

2.3 预览效果

1）示例一：未设置冻结的报表

注：如果桌面分辨率较高，看不到效果的话，可以缩小浏览器窗口，刷新页面再 观察效果

2）示例二：设置了冻结的报表

注：此 JS 不支持移动端使用

1）示例一

模板效果在线查看请点击：JS 实现分析或填报报表加载后自动滚动到最下方或最右侧示例一.cpt

已完成的模板，可参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填报预览JS实例\39-JS实现分析或填报报表加载后自动滚动到最下方或最右侧示例一.cpt

点击下载模板：39-JS实现分析或填报报表加载后自动滚动到最下方或最右侧示例一.cpt

2）示例二

模板效果在线查看请点击：JS 实现分析或填报报表加载后自动滚动到最下方或最右侧示例二.cpt

已完成的模板，可参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填报预览JS实例\39-JS实现分析或填报报表加载后自动滚动到最下方或最右侧示例二.cpt

点击下载模板：39-JS实现分析或填报报表加载后自动滚动到最下方或最右侧示例二.cpt