scrollTop() 不适用于滚动：触摸

Question

我的这个PC_page网站的MOBILE_page有问题：

Clik here to see

如您所见，如果您滚动页面然后单击屏幕左/右侧的下一个或上一个箭头，则内容会在页面顶部自行滚动下一个/上一个内容。

我目前是用下面的代码变成点击函数来获得效果的：

$(function(){
   var cntWid = $('#content').width();
   var scrNum = $('#slider ul').length;
   $('#slider').width(cntWid*scrNum);   
   c = 0;

   $('#arrownext, #arrowprev').click(function(){ 
        var myId = this.id=='fa' ? c++ : c--;
        c = c===-1 ? scrNum-1 : c%scrNum;
        $('#slider').stop().animate({left: -c*cntWid, top:0}, 800); 
        $("html, body").animate({ scrollTop: 0 }, "fast"); 
        $('#slider').animate({ scrollTop: 0 }, "fast");                             
   });
});

所以PC页面没有问题。

遗憾的是，当我使用箭头按钮时，同一页面的移动版本不会滚动到内容的顶部，因为在 CSS 文件中我将#slider div 区域定义为：

-webkit-overflow-scrolling:touch;

因此，当我单击箭头时，页面会向左或向右移动，但滚动级别保持不变。 我也想在移动设备上看到滚动顶部的内容设置，就像在 pc 版本中一样。 不幸的是，我真的无法解决这个问题。

如果我不使用 -webkit-overflow-scrolling:touch 移动设备上的滚动效果会失去其动量效果，但 scrolltop:0 有效。我想要两者兼得。

有什么建议吗？

问候

马特奥:)

Answer 1

这是因为移动设备无法识别click 事件来解决这个问题有一个touchstart touchend 事件：

$('yourselector').on('touchstart click', function(){
    $("html, body").animate({ scrollTop: 0 }, "fast");
});