Javascript &引用；“返回顶部”；点击手机时，按钮不会隐藏

我有一个简单的“返回顶部”按钮，固定在左下角，当用户滚动超过某个点时，该按钮会消失，当用户单击按钮或滚动返回顶部时，该按钮会隐藏。那部分很好用。然而，在移动设备上，如果我点击按钮，它不仅会激活hover伪类和工具提示，而且实际上即使在它滚动回顶部后也会保持这种状态。我想我需要添加一些额外的代码来覆盖触摸功能，但这是我不知道的部分

以下是我的网站上使用按钮的其中一个公文包页面的链接：

var$btt=$（'.back_to_top'）；
//当用户单击返回顶部按钮时，滚动至顶部
$btt.on（'click'，函数（e）{
$（'html，body'）。设置动画({
滚动顶部：0
}, 1200);
e、 预防默认值（）；
});
//根据滚动位置显示/隐藏返回顶部按钮
$（窗口）.on（'scroll'，function（）{
var self=$（此），
高度=自身高度（），
top=self.scrollTop（）；
如果（顶部>高度）{
如果（$btt.css（'opacity'）！==1）{
$btt.removeClass（'hide'）.addClass（'show'）；
}
}否则{
$btt.removeClass（'show'）.addClass（'hide'）；
}
});
*{
保证金：0；
填充：0；
}
p{
颜色：白色；
}
p:最后一种{
位置：绝对位置；
底部：0；
}
div{
背景：线性梯度（rgba（20230170,1），rgba（20170230,1））；
高度：3000px；
宽度：100vw；
位置：相对位置；
}
.返回顶部{
位置：固定；
z指数：3；
高度：40px；
宽度：40px；
底部：20px；
左：20px；
边界半径：50%；
不透明度：0.7；
盒影：0 2px 8px 0 rgba（0,0,0,0.3）；
背景：webkit线性梯度（顶部，rgba（204,27,48,1），rgba（109,13199,1.00））；
背景：莫兹线性梯度（顶部，rgba（204,27,48,1），rgba（109,13199,1.00））；
背景：-o-线性梯度（到顶部，rgba（204,27,48,1），rgba（109,13199,1.00））；
背景：线性梯度（180度，rgba（204,27,48,1），rgba（109,13199,1.00））；
}
.返回至顶部：悬停{
不透明度：1；
盒影：0 6px 12px 0 rgba（0,0,0,0.4）；
转换：translateY（-3px）；
}
.返回顶部，
.返回至顶部：悬停{
过渡：0.3s；
将改变：变换，不透明度；
}
.返回到顶部：：之前，
.返回到顶部：：之后{
位置：绝对位置；
不透明度：0；
指针事件：无；
将改变：不透明度，变换；
}
.返回到顶部：：之前{
内容：“返回顶部”；
颜色：rgba（255255,0.8）；
背景色：rgba（20,25,30,1）；
边界半径：4px；
宽度：100px；
填充：8px；
文本对齐：居中；
左：150%；
顶部：3px；
}
.返回到顶部：：之后{
边框底部：6px实心透明；
右边框：8px实心rgba（20,25,30,1）；
边框顶部：6px实心透明；
左：130%；
底部：13px；
宽度：0；
内容：''；
}
.返回到顶部：悬停：：之前，
.返回到顶部：悬停：：之后{
不透明度：1；
转换：translateX（-6px）；
过渡：0.4s 0.4s缓解；
将改变：不透明度，变换；
}
.隐藏{
不透明度：0；
指针事件：无；
}
.表演{
不透明度：0.7；
}
隐藏
.表演{
过渡：0.6s缓解；
}

顶

底部

您可以使用
@media hover:hover
媒体查询将样式限制为完全支持
:hover
的设备（配备鼠标或某些定点设备的设备）

将您的所有悬停样式包装在该文件中

@media (hover:hover) {
  .back_to_top:hover {
    opacity: 1;
    box-shadow: 0 6px 12px 0 rgba(0,0,0,0.4);
    transform: translateY(-3px);
  }

  .back_to_top,
  .back_to_top:hover {
    transition: 0.3s ease;
    will-change: transform, opacity;
  }

  .back_to_top:hover::before,
  .back_to_top:hover::after {
    opacity: 1;
    transform: translateX(-6px);
    transition: 0.4s 0.4s ease;
    will-change: opacity, transform;
  }
}


相反，您也可以将不支持
：完全悬停的设备作为目标

@media (hover:none), (hover:on-demand) { ... }

您可以使用
@media hover:hover
媒体查询将样式限制为完全支持
:hover
的设备（配备鼠标或某些定点设备的设备）

将您的所有悬停样式包装在该文件中

@media (hover:hover) {
  .back_to_top:hover {
    opacity: 1;
    box-shadow: 0 6px 12px 0 rgba(0,0,0,0.4);
    transform: translateY(-3px);
  }

  .back_to_top,
  .back_to_top:hover {
    transition: 0.3s ease;
    will-change: transform, opacity;
  }

  .back_to_top:hover::before,
  .back_to_top:hover::after {
    opacity: 1;
    transform: translateX(-6px);
    transition: 0.4s 0.4s ease;
    will-change: opacity, transform;
  }
}


相反，您也可以将不支持
：完全悬停的设备作为目标

@media (hover:none), (hover:on-demand) { ... }

可能不是您想要的，但您不能只添加
$btt.removeClass（'show'）.addClass（'hide'）在点击事件处理程序中？当你说“在手机上”时，请具体说明浏览器。我尝试了，但没有成功。我认为这与悬停状态下点击输入的默认行为有关。即使我尝试点击身体的其他任何地方，按钮上的悬停状态仍保持活动状态，直到我向下滚动并点击关闭。这是iOS Safarity的特点。这就是为什么建议遵循移动优先的方法。在这种情况下，您需要使用
@media
querys删除/反转应用于较大设备宽度上的悬停效果可能不是您想要的，但您不能只添加
$btt.removeClass（'show'）.addClass（'hide'）在点击事件处理程序中？当你说“在手机上”时，请具体说明浏览器。我尝试了，但没有成功。我认为这与悬停状态下点击输入的默认行为有关。即使我尝试点击身体的其他任何地方，按钮上的悬停状态仍保持活动状态，直到我向下滚动并点击关闭。这是iOS Safarity的特点。这就是为什么建议遵循移动优先的方法。在这种情况下，您需要使用
@media
查询删除/反转应用于较大设备宽度的悬停效果