Android WebView内嵌JS实现点击跳转后自动滚动失效问题求助

我来帮你排查下这个问题，结合你给出的代码和场景，大概率是几个常见的WebView+JS交互的坑导致的，给你几个可行的解决方向：

1. 修正JS文件的加载路径 #

你把JS文件放在了assets文件夹，但当前script标签的路径WebView是找不到的。Android WebView访问assets资源需要用file:///android_asset/开头的绝对路径，所以要修改script标签：

<script src='file:///android_asset/jquery-3.2.1.min.js' type='text/javascript'></script>
<script src='file:///android_asset/jquery-ui-1.12.1/jquery-ui.min.js' type='text/javascript'></script>

如果路径不对，JS文件加载失败，你的scrollToElement函数自然无法执行。

2. 开启WebView的JS交互权限 #

必须在WebView的配置中开启JavaScript支持，同时允许访问本地文件，否则JS代码完全无法运行：

WebSettings webSettings = yourWebView.getSettings();
webSettings.setJavaScriptEnabled(true); // 核心：开启JS支持
webSettings.setAllowFileAccess(true); // 允许访问assets里的本地文件
webSettings.setDomStorageEnabled(true); // 部分JS功能需要DOM存储支持

3. 优化滚动函数，避免兼容性问题 #

你当前的offset累加方法在嵌套元素场景下容易出错，推荐用更可靠的原生API或jQuery方法，同时给元素id加前缀（数字开头的id在部分WebView内核中可能有兼容性问题）：

原生JS版本（无需jQuery） #

function scrollToElement(id) {
  const elem = document.getElementById(id);
  if (elem) {
    // 平滑滚动到元素顶部，block: 'start'确保元素对齐视口顶部
    elem.scrollIntoView({ behavior: 'smooth', block: 'start' });
  } else {
    console.log(`元素id ${id} 未找到`);
  }
}

同时修改div的id拼接逻辑：

content += "<div id='section-" + i + "'>"; // 加前缀section-，避免纯数字id的问题

调用时传section-55即可。

jQuery版本（如果必须用jQuery） #

function scrollToElement(id) {
  const $target = $('#' + id);
  if ($target.length > 0) {
    $('html, body').animate({
      scrollTop: $target.offset().top
    }, 300); // 300ms平滑滚动，也可以直接用scrollTop实现瞬间滚动
  } else {
    console.log(`元素id ${id} 未找到`);
  }
}

4. 确保JS函数在DOM加载完成后执行 #

如果在页面还没渲染完成时调用scrollToElement，元素还不存在，自然无法滚动。推荐在WebView的onPageFinished回调中执行滚动逻辑：

yourWebView.setWebViewClient(new WebViewClient() {
  @Override
  public void onPageFinished(WebView view, String url) {
    super.onPageFinished(view, url);
    // 页面加载完成后，调用滚动到section-55的逻辑
    // Android 4.4+推荐用evaluateJavascript，更高效且无阻塞
    view.evaluateJavascript("scrollToElement('section-55')", null);
    // 低版本可以用loadUrl：view.loadUrl("javascript:scrollToElement('section-55')");
  }
});

5. 开启调试模式排查隐藏错误 #

即使你看不到报错，也可以开启WebView的调试功能，在Chrome中查看具体的JS错误：

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
  WebView.setWebContentsDebuggingEnabled(true);
}

然后打开Chrome浏览器，输入chrome://inspect，找到你的App的WebView，进入调试面板查看Console，就能看到诸如JS文件加载失败、元素不存在等隐藏错误。

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