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

您可以使用: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

Your Fiddle updated

相反，您也可以完全定位不支持@media (hover:none), (hover:on-demand) { ... }的设备。

ENV_PATH = os.path.abspath(os.path.dirname(__file__))

MEDIA_ROOT = os.path.join(ENV_PATH, 'media/')

点按手机时，“返回顶部”按钮不会隐藏

1 个答案: