scrollTo：在指定时间内，将页面滚动到指定的绝对位置。

返回页面顶部。
收起
自动换行
深色代码主题
复制
```
this.webController.scrollTo(0, 0);
```
WebScrollDemo.ets
scrollBy：在指定时间内将页面滚动指定的偏移量。

可以作为Web组件嵌套滚动中，控制Web组件滚动的接口，详见滚动偏移量由滚动父组件统一派发。
pageUp：将Web组件的内容向上滚动半个视口大小或者滚动到页面最顶部，通过top入参控制。
pageDown：将Web组件的内容向下滚动半个视口大小或者滚动到页面最底部，通过bottom入参控制。

调用JS侧接口控制Web页面滚动

scrollBy：相对当前滚动位置滚动一定距离（正数向下/右，负数向上/左）。
收起
自动换行
深色代码主题
复制
```
window.scrollBy(deltaX, deltaY);// deltaX是元素要在横轴上滚动的距离，deltaY是元素要在纵轴上滚动的距离。
```
渐进式滚动（如“阅读更多”按钮）。
收起
自动换行
深色代码主题
复制
```
document.getElementById("read-more").addEventListener("click", ()=>{
  window.scrollBy(0, 300);
})
```

scrollTo：将页面滚动到绝对坐标位置。

收起
自动换行
深色代码主题
复制
window.scrollTo(x, y);// x是滚动后窗口左上角的水平坐标（像素），y是滚动后窗口左上角的垂直坐标（像素）。

(1) 返回页面顶部。

收起
自动换行
深色代码主题
复制
window.scrollTo(0, 0);

(2) 跳转到页面特定位置。

收起
自动换行
深色代码主题
复制
window.scrollTo(0, 500); // 滚动到某个固定像素位置（如：500px）

点击状态栏回顶

当Web页面处于非顶部状态或向下抛滑时，此时若需返回Web页面顶部，可以使用backToTop方法，开启后通过点击状态栏，打断抛滑并将Web页面滚动到页面顶部。

示例代码：

收起
自动换行
深色代码主题
复制
// xxx.ets
import { webview } from '@kit.ArkWeb';

@Entry
@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController();

  build() {
    Column() {
      Web({ src: $rawfile("index.html"), controller: this.controller })
        .backToTop(true)
    }
  }
}

加载的HTML文件：

收起
自动换行
深色代码主题
复制
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" id="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .blue {
          background-color: lightblue;
        }
        .green {
          background-color: lightgreen;
        }
        .blue, .green {
         font-size:16px;
         height:200px;
         text-align: center;       /* 水平居中 */
         line-height: 200px;       /* 垂直居中（值等于容器高度） */
        }
    </style>
</head>
<body>
<div class="blue" >webArea</div>
<div class="green">webArea</div>
<div class="blue">webArea</div>
<div class="green">webArea</div>
<div class="blue">webArea</div>
<div class="green">webArea</div>
<div class="blue">webArea</div>
<div class="green">webArea</div>
<div class="blue">webArea</div>
</body>
</html>

效果展示：

Web组件嵌套滚动

Web组件对接软键盘

意见反馈

以上内容对您是否有帮助？

意见反馈

如果您有其他疑问，您也可以通过开发者社区问答频道来和我们联系探讨。

社区提问 AI 助手提问