页面总是自动聚焦在文本区域，然后滚动到顶部不起作用

Question

我有一个页面，其中包含一些复选框项目，然后在页面的最底部有一个textarea元素。此textarea没有分配自动对焦。

<textarea id="comments" class="form-control" rows="8">@Comments</textarea>

textarea总是在页面加载并滚动到底部时获得焦点。

它必须适用于Android和iPhone的网络视图容器

我已经尝试过在页面加载后滚动到顶部，或者从这个元素中删除焦点，但到目前为止没有成功。

我在这里尝试了以下不同的技巧：

$("html,body").animate({ scrollTop: 0 }, "slow");
$(this).scrollTop(0);
$('textarea').blur();
$('#comments').blur();
document.activeElement.blur();
document.getElementById("origin").focus();
$('html,body').animate({
scrollTop: $("#origin").offset().top
});
$("body").scrollTop(0);
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;

偶数按钮转到顶部点击不工作

$("#myBtn").on("click", function () {
console.log('ddd');
$(this).scrollTop(0);
$("html").scrollTop(0);
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
});

我还发现这可能是因为溢出：在主容器上滚动可能会阻止scrolltotop工作。这是我在_Layout.chtml页面中的主要容器详细信息。

#mobile-content-wrapper {
position: relative;
width: 100%;
padding-bottom: 80px;
overflow-y: scroll;
overflow-x: hidden;

我可以借鉴你在这里的一些经验。

Answer 1

实际上我能够破解它。基本上，我在页面加载时使文本区域只读。所以它不会得到关注。然后将其设置为在超时后再次启用。这样，当用户开始向下滚动时，文本框将被启用。

setTimeout(function((｛document.getElementById('comments'(.readOnly=false｝，500(；

Answer 2

android scrollTop的解决方法是：

document.body.style.overflow = 'hidden';
document.body.scrollTop = 0; 
document.body.style.overflow = 'scroll'; // or overflow-y and/or 'auto'

在一些旧版本的android浏览器上，如果溢出没有"隐藏"(这肯定是浏览器错误(，则会忽略设置scrollTop。

也就是说，我没有在身体元素上测试。这个错误出现在任何有溢出的DOM元素上，这就是我发现解决方法的地方。不过，我已经很多年没有遇到这个错误了，因为旧的android浏览器非常罕见，在我当前的项目中也不支持。

此外，试图通过使用scrollTop来解决您的问题似乎是错误的。您应该首先尝试解决元素在启动时受到关注并滚动窗口的原因。如果没有看到一个正在运行的网站有这个问题，我无法帮助你。如果你能创建一个jsfiddle或类似的复制问题，我很乐意看看它