javascript - "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;
  }
}

Your Fiddle updated

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

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