0
我有一个简单的“返回顶部”按钮，固定在左下角，当用户滚动某个点时隐藏，当用户隐藏时隐藏点击按钮或滚动回顶部。这部分工作正常。但是，在移动设备上，如果我点击该按钮，它不仅会激活悬停伪类和工具提示，而且实际上仍会保持该状态，即使它滚动回顶端。我想我需要添加一些额外的代码来覆盖触摸功能，但这是我不知道的部分。“返回页首”按钮在手机上点击时不会隐藏
这里是链接到我的网站上的投资组合的一个网页，使用该按钮：www.nickolder.com/banknote.html
var $btt = $('.back_to_top');
// Scroll to top when user clicks back-to-top button
$btt.on('click', function (e) {
$('html, body').animate({
scrollTop: 0
}, 1200);
e.preventDefault();
});
// Show/hide back-to-top button depending on scroll position
$(window).on('scroll', function() {
var self = $(this),
height = self.height(),
top = self.scrollTop();
if (top > height) {
if ($btt.css('opacity') !== 1) {
$btt.removeClass('hide').addClass('show');
}
} else {
$btt.removeClass('show').addClass('hide');
}
});* {
margin: 0;
padding: 0;
}
p {
color: white;
}
p:last-of-type {
position: absolute;
bottom: 0;
}
div {
background: linear-gradient(rgba(20,230,170,1), rgba(20, 170, 230, 1));
height: 3000px;
width: 100vw;
position: relative;
}
.back_to_top {
\t position: fixed;
\t z-index: 3;
\t height: 40px;
\t width: 40px;
\t bottom: 20px;
\t left: 20px;
\t border-radius: 50%;
\t opacity: 0.7;
\t box-shadow: 0 2px 8px 0 rgba(0,0,0,0.3);
background: -webkit-linear-gradient(top, rgba(204,27,48,1), rgba(109,13,199,1.00));
\t background: -moz-linear-gradient(top, rgba(204,27,48,1), rgba(109,13,199,1.00));
\t background: -o-linear-gradient(to top, rgba(204,27,48,1), rgba(109,13,199,1.00));
\t background: linear-gradient(180deg, rgba(204,27,48,1), rgba(109,13,199,1.00));
}
.back_to_top:hover {
\t opacity: 1;
\t box-shadow: 0 6px 12px 0 rgba(0,0,0,0.4);
\t transform: translateY(-3px);
}
.back_to_top,
.back_to_top:hover {
\t transition: 0.3s ease;
\t will-change: transform, opacity;
}
.back_to_top::before,
.back_to_top::after {
\t position: absolute;
\t opacity: 0;
\t pointer-events: none;
\t will-change: opacity, transform;
}
.back_to_top::before {
\t content: 'Back to top';
\t color: rgba(255,255,255,0.8);
\t background-color: rgba(20,25,30,1);
\t border-radius: 4px;
\t width: 100px;
\t padding: 8px;
\t text-align: center;
\t left: 150%;
\t top: 3px;
}
.back_to_top::after {
\t border-bottom: 6px solid transparent;
border-right: 8px solid rgba(20,25,30,1);
border-top: 6px solid transparent;
\t left: 130%;
\t bottom: 13px;
\t width: 0;
\t content: '';
}
.back_to_top:hover::before,
.back_to_top:hover::after {
\t opacity: 1;
\t transform: translateX(-6px);
\t transition: 0.4s 0.4s ease;
\t will-change: opacity, transform;
}
.hide {
\t opacity: 0;
\t pointer-events: none;
}
.show {
\t opacity: 0.7;
}
.hide,
.show {
\t transition: 0.6s ease;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<p>Top</p>
<p>Bottom</p>
<a href="#" class="back_to_top hide"></a>
</div>
可能不是你想要的，但你可以不只是在点击事件处理程序中添加'$ btt.removeClass（'show'）。addClass（'hide'）;'' – George
当你说“在手机上”时，请具体说明浏览器。 – mjw
我试过，没有运气。我认为这与悬停状态下轻拍输入的默认行为有关。即使当我尝试在身体的其他地方点击时，悬停状态仍然在按钮上处于活动状态，直到我一直向下滚动并点击关闭。 – Nolder