点击手机时"Back to top"按钮不会隐藏

Question

>我有一个简单的"返回顶部"按钮，该按钮固定在左下角，当用户滚动到某个点时淡入，当用户单击按钮或滚动回顶部时隐藏。 这部分工作正常。 但是在移动设备上，如果我点击该按钮，它不仅会激活悬停伪类和工具提示，而且即使在滚动回顶部后实际上仍保持该状态。 我想我需要添加一些额外的代码来涵盖触摸功能，但这是我不知道的部分。

以下是指向我网站上使用该按钮的投资组合页面之一的链接：www.nickolder.com/banknote.html

JSFiddle

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 {
	position: fixed;
	z-index: 3;
	height: 40px;
	width: 40px;
	bottom: 20px;
	left: 20px;
	border-radius: 50%;
	opacity: 0.7;
	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));
	background: -moz-linear-gradient(top, rgba(204,27,48,1), rgba(109,13,199,1.00));
	background: -o-linear-gradient(to top, rgba(204,27,48,1), rgba(109,13,199,1.00));
	background: linear-gradient(180deg, rgba(204,27,48,1), rgba(109,13,199,1.00));
}
.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::before,
.back_to_top::after {
	position: absolute;
	opacity: 0;
	pointer-events: none;
	will-change: opacity, transform;
}
.back_to_top::before {
	content: 'Back to top';
	color: rgba(255,255,255,0.8);
	background-color: rgba(20,25,30,1);
	border-radius: 4px;
	width: 100px;
	padding: 8px;
	text-align: center;
	left: 150%;
	top: 3px;
}
.back_to_top::after {
	border-bottom: 6px solid transparent;
  border-right: 8px solid rgba(20,25,30,1);
  border-top: 6px solid transparent;
	left: 130%;
	bottom: 13px;
	width: 0;
	content: '';
}
.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;
}
.hide {
	opacity: 0;
	pointer-events: none;
}
.show {
	opacity: 0.7;
}
.hide,
.show {
	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>

Answer 1

您可以使用

@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;
  }
}

你的小提琴更新了

相反，您也可以定位不完全支持:hover的设备。

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