So verhindern Sie jQuery Zurück zum Anfang Schaltfläche, die ein doppeltes Tippen auf Mobil erfordert

Question

Ich verwende eine Schaltfläche Zurück zum Anfang, die angezeigt wird, wenn der Benutzer auf einer WordPress-Website, die ich gerade entwickle, auf meinem Telefon 300px herunterfährt. Es macht mich doppelt tippen, um die Schriftrolle zu arbeiten. Ich frage mich, ob es eine Möglichkeit gibt, dies so einzustellen, dass der Knopf beim ersten Antippen ausgelöst wird.

Hier ist der Test-Site URL: http://tippingpointphoto.flywheelsites.com/

Hier ist der Code, den ich mit:

HTML

<a href="#" class="topbutton">Back to Top</a> 

CSS

.topbutton { 
font-family:$noto-sans; 
font-size:14px; 
text-align:center; 
color:$white; 
height:65px; 
width:75px; 
padding:.5em; 
position:fixed; 
right:5px; 
bottom:5px; 
z-index:1; 
text-decoration:none; 
background:$button-gray; 
display:none; 

&:hover{ 
    background:$blue; 
    color: $white; 
} 
} 

jQuery

jQuery(document).ready(function($){ 
    var offset = 300; 
    var speed = 250; 
    var duration = 500; 
    $(window).scroll(function(){ 
      if ($(this).scrollTop() < offset) { 
      $('.topbutton') .fadeOut(duration); 
      } else { 
      $('.topbutton') .fadeIn(duration); 
      } 
     }); 
    $('.topbutton').on('click', function(){ 
    $('html, body').animate({scrollTop:0}, speed); 
    return false; 
    }); 
}); 

Answer 1

Ich stieß vor kurzem auf ein ähnliches Problem mit dem Versuch, Hover-Aktionen auf Mobilgeräten mit einem einzigen Tap zu replizieren. Versuchen Sie, eine dieser Zeilen (oder beide) zu Ihrer .ready Funktion hinzuzufügen:

$('body').bind('touchstart', function() {}); 
// and/or 
document.addEventListener("touchstart", function(){}, true);