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