微信打开网页键盘弹起后页面会被顶上去,键盘收起,页面没有回到原来的位置。完美解决方式。

正常页面:

 

 键盘拉起页面

键盘收起页面

 

 解决方案:在点击按钮那里或者是input失去焦点时加下面其中一个即可解决。 通过scrollTop滚动来解决。

 scrollTop

$("input").blur(function () {
   $("html,body").animate({scrollTop: document.documentElement.clientHeight},500);
});

或者是scrollTo

//滚动到顶部
window.scrollTo(0, 0);
//滚动到底部
window.scrollTo(0, document.documentElement.clientHeight); 

 

完美解决方案: 无bug(根据当前滚动条的位置来计算,失去焦点后,重新让滚动条滚动到之前的位置,太完美了)

    解决方案:给输入框(或select选择框)添加失去焦点的事件,当输入框失去焦点,页面自动滚动到顶部,并且需要加定时器,否则偶尔会失效。

$("input").blur(function () {
        setTimeout(function() {
                var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
                window.scrollTo(0, Math.max(scrollHeight - 1, 0));
        }, 100);
    });

 参考:https://blog.csdn.net/weixin_42573146/article/details/85044386

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值