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'）を追加するだけでいいですか？clickイベントハンドラでaddClass（ 'hide'）; – George
「モバイルで」と言えば、ブラウザについて具体的にご記入ください。 – mjw
私は運が無ければそれを試みた。私はそれがホバー状態のタップ入力のためのデフォルトの動作と関係があると思う。私が体の他のどこかをタップしようとしても、ホバー状態は、全部スクロールダウンしてタップオフするまでボタン上でアクティブのままです。 – Nolder