Javascript 内容不'；t单击时向上滚动"；滚动行为：平滑&引用；指定

我想在单击“计算提示”按钮时使提示计算器的结果向上滚动

发生的事情是：

如果我没有在

:root

或

html

上或在js内部指定

滚动行为：平滑
，它可以工作，但看起来很颠簸

如果我指定

滚动行为：平滑

只有在我单击“计算提示”按钮之前没有输入具有焦点时，它才会工作

如果我在输入仍有焦点的情况下点击“计算提示”，则仅当我再次点击按钮时，内容才会向上滚动，这非常奇怪。这就像，首先它负责焦点，然后是滚动命令

没有一个用户会在点击一个按钮之前考虑确保输入没有焦点

所有这些都发生在我的Android智能手机上。在pc Chrome上，无论有无移动模拟器都能完美工作

这里是上传的网站，如果您想查看手机上的行为

let calculate=document.querySelector（'.calculate'）
让theTip=document.querySelector（“.theTip”）
let reset=document.querySelector（'.reset'）
让theResult=document.querySelector（'.theResult'）
let splittingPart=document.querySelector（'.spliting'）
让checkPPRESULT=document.querySelector（'.checkperpersonRESULT'）
让tipPPRESULT=document.querySelector（'.tipperpersonRESULT'））
//计算按钮*************
calculate.addEventListener（'单击'，（）=>{
let check=parseFloat（document.querySelector（'.checkInput'）.value）
let tip=parseFloat（document.querySelector（'.howmount'）.value）
let split=parseFloat（document.querySelector（'.splitInput'）.value）
//提示结果
让结果=检查/100*提示
theTip.innerText='$'+''+result.toFixed（2）
//检查PP和TIP PP结果
让checkPP=检查/拆分
让tipPP=（检查/100*提示）/拆分
checkPPRESULT.innerText='$'+''+checkPP.toFixed（2）
tipppreslt.innerText='$'+''+tipPP.toFixed（2）
如果（isNaN（结果）| | isNaN（检查）| | isNaN（提示））{
theResult.classList.add（'displaynone'）
让checkVOID=document.querySelector（'.checkInput'）
让howMuchVOID=document.querySelector（“.howmount”）
checkVOID.value=“”
howMuchVOID.value=“”
checkVOID.placeholder='请插入数字'
howMuchVOID.placeholder='请插入数字'
checkVOID.style.border='2px纯红'
howMuchVOID.style.border='2px纯红'
}
如果（isNaN（拆分））{
splittingPart.style.display='none'
theTip.style.display='block'
document.querySelector（'.youhaveto'）.style.display='block'
}
如果（！isNaN（拆分））{
splittingPart.style.display='flex'
//这里///////////////////
splittingPart.scrollIntoView（）
}
如果（！isNaN（结果）| |！isNaN（检查）| |！isNaN（提示））{
如果（！isNaN（拆分））{
theTip.style.display='none'
document.querySelector（'.youhaveto'）.style.display='none'
}
theResult.style.display='block'
theTip.classList.remove（'displaynone'）
theResult.classList.add（'add'））
//这里////////////////////
theResult.scrollIntoView（）
}
})
//检查插入的值是否正确************+
函数检查（）{
让hey=document.querySelector（'.checkInput'）
if（isNaN（hey.value））{
hey.style.border='2px纯红'
}
如果（！isNaN（hey.value））则为else{
hey.style.border='2px纯绿色'
} 
}
函数checkingOne（）{
让hello=document.querySelector（“.howmount”）
if（isNaN（hello.value））{
hello.style.border='2px纯红'
}
如果（！isNaN（hello.value））{
hello.style.border='2px纯绿色'
} 
}
//当输入为空时，将输入边框变为蓝色************+
以功能为中心（）{
让hey=document.querySelector（'.checkInput'）
如果（hey.value==''）{
hey.style.border='2px实心道奇蓝'
}
}
函数focusedOne（）{
让hello=document.querySelector（“.howmount”）
如果（hello.value==''）{
hello.style.border='2px实心道奇蓝'
}
}
函数聚焦三（）{
让heythere=document.querySelector（'.splitInput'）
if（heythere.value==''）{
heythere.style.border='2px实心道奇蓝'
}
}
//单击输出时输入黑色边框***********
函数模糊（）{
让hey=document.querySelector（'.checkInput'）
让hello=document.querySelector（“.howmount”）
让heythere=document.querySelector（'.splitInput'）
hey.style.border='1px纯黑'
hello.style.border='1px纯黑'
heythere.style.border='1px纯黑'
}
//复位按钮****************
reset.addEventListener（'单击'，（）=>{
document.querySelector（'.checkInput'）。值=''
document.querySelector（'.howmount'）。值=''
document.querySelector（'.splitInput'）。值=''
theResult.style.display='none'
splittingPart.style.display='none'
document.querySelector（'.checkInput'）。占位符=''
document.querySelector（'.howmount'）。占位符=''
document.querySelector（'.splitInput'）。占位符=''
document.querySelector（'.checkInput'）.style.border='1px纯黑'
document.querySelector（'.howmount'）.style.border='1px纯黑'
document.querySelector（'.splitInput'）.style.border='1px纯黑'
})

*{
保证金：0；
填充：0；
框大小：边框框；
}
身体{
最小高度：100vh；
颜色：白色；
背景：线性梯度（180度，rgb（30,30,30），rgb（0,0,0），rgb（0,0,0），rgb（0,0,0），rgb（30,30,30））；
背景尺寸：100%自动；
背景重复：无重复；
}
：根{
溢出x：隐藏；
}
html{
滚动行为：平滑；
}
.集装箱{
显示器：flex；
弯曲方向：立柱；
证明内容：之间的空间；
对齐项目：居中；
边缘顶部：5vh；
z指数：3；
位置：相对位置；
}
.头衔{
文本对齐：居中；
字体系列：“蒙特塞拉特”，无衬线；
文本阴影：0 5px黑色，0 0 15px黑色；
边际波