如何在TwinCAT3 HMI中实现页面顶部与底部快速跳转？

可行实现方法 #

方法一：直接控制容器滚动位置 #

1. 在工具栏添加两个按钮，分别命名为“跳至顶部”“跳至底部”
2. 给按钮绑定OnClick事件，写入对应脚本：
   • 跳至顶部脚本：

     // 获取当前页面的内容容器
     var contentContainer = HmiRuntime.UI.Root.Content;
     // 直接将滚动位置设为0，实现无滚动跳转
     contentContainer.ScrollTop = 0;
     

   • 跳至底部脚本：

     var contentContainer = HmiRuntime.UI.Root.Content;
     // 计算容器可滚动的最大高度，直接跳转到底部
     contentContainer.ScrollTop = contentContainer.ScrollHeight - contentContainer.ClientHeight;
     

方法二：通过锚点控件聚焦跳转 #

如果页面结构复杂，可通过隐藏锚点控件实现精准跳转：

1. 在页面最顶部和最底部分别添加一个HmiText控件，设置Name为Anchor_Top和Anchor_Bottom，并将Visible属性设为False（隐藏不影响界面）
2. 给按钮绑定OnClick事件：
   • 跳至顶部脚本：

     HmiRuntime.UI.FindElement("Anchor_Top").Focus();
     

   • 跳至底部脚本：

     HmiRuntime.UI.FindElement("Anchor_Bottom").Focus();
     

注意要点 #

• 脚本中引用的容器/控件名称必须和项目中的实际名称完全匹配
• 若页面使用了嵌套容器，需调整contentContainer的获取路径，比如HmiRuntime.UI.Root.Content.Page1_InnerContainer
• 脚本仅在HMI Runtime运行环境中生效，编辑模式下无法测试效果

内容的提问来源于stack exchange，提问作者Majid