scrollTop（）不適用於scrolling：touch

Question

我的PC_page網站的MOBILE_page存在問題：

點擊這里查看

如您所見，如果您滾動頁面，然后單擊屏幕左側/右側的下一個或上一個箭頭，則內容會自動滾動到頁面頂部的下一個/上一個內容。

我目前在點擊函數中使用以下代碼來獲得效果：

$(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起作用。 我想兩者兼得。

有什么建議嗎？

問候

Matteo :)

Answer 1

這是因為移動設備無法識別click事件以解決此問題，因此存在touchstart touchend事件：

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