在手機上點擊時，“返回頂部”按鈕不會隱藏

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) { ... }