我正在使用一个返回顶部按钮,当用户在我正在开发的 WordPress 网站上将页面向下滚动 300 像素时,该按钮就会出现,而在我的手机上,它会让我双击以让滚动起作用。我想知道是否有办法调整它以便在第一次点击时触发按钮。
这是测试站点 URL:http://tippingpointphoto.flywheelsites.com/
这是我使用的代码:
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;
});
});
最佳答案
我最近遇到了一个类似的问题,即尝试通过单击在移动设备上复制悬停操作。尝试将这些行之一(或两者)添加到您的 .ready
函数中:
$('body').bind('touchstart', function() {});
// and/or
document.addEventListener("touchstart", function(){}, true);
关于javascript - 如何防止 jQuery 返回顶部按钮需要在移动设备上双击,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37706394/