$("html , body").animate({scrollTop: 0},‘slow‘);

二、jQuery判斷移動端屏幕的滑動方向

$(‘body‘).on(‘touchstart‘, function(e) {
        var touch = e.originalEvent,
                startX = touch.changedTouches[0].pageX;
        startY = touch.changedTouches[0].pageY;
        $(‘body‘).on(‘touchmove‘, function(e) {
                touch = e.originalEvent.touches[0] ||
                        e.originalEvent.changedTouches[0];
                if (touch.pageX - startX > 10) {
                        console.log("右劃");
                        showPrevious();
                        $(‘body‘).off(‘touchmove‘);
                } else if (touch.pageX - startX < -10) {
                        console.log("左劃");
                        showNext();
                        $(‘body‘).off(‘touchmove‘);
                };
                if (touch.pageY - startY > 10) {
                        console.log("下劃");
                        $(‘body‘).off(‘touchmove‘);
                } else if (touch.pageY - startY < -10) {
                        console.log("上劃");
                        $(‘body‘).off(‘touchmove‘);
                };
        });

        // Return false to prevent image
        // highlighting on Android
        return false;

}).on(‘touchend‘, function() {
        $(‘body‘).off(‘touchmove‘);
});
 

三、頁面移動到對應位置開始執行動畫

橙色容器從下方進入可視區域時(或者進入一段高度後)，容器內的動畫播放。

var eTop=$(element).offset().top;//橙色容器距離整個頁面頂部的距離
var wTop=$(window).height();//綠色框可視區域的高度
window.onresize=funciton(){
var wTop=$(window).height();//縮放窗口這個高度會改變，需要再取得
}
$(window).scroll(funciont(){
  var dTop = $(document).scrollTop();//綠色框可視區域上面到黑色頁面頂部的距離，會實時改變
    //所以當橙色容器進入可視區域怎麽判斷?
    //放在scroll事件裏面
    if(dTop+wTop > eTop){//動畫播放事件}
});
 

就這樣，當可視區域上面的高度+可視區域高度>容器距離頂部高度，我們就知道容器進入【可視區底部】了
如果你想讓容器進入一段距離(比如100px)再觸發動畫？

//放在scroll事件裏面
if(dTop+wTop-100 > eTop){//動畫播放事件}

四、滾動條的啟用與禁止
//禁止滾動條

$(document.body).css({
 "overflow-x":"hidden",
 "overflow-y":"hidden"
});

//啟用滾動條
$(document.body).css({
 "overflow-x":"auto",
 "overflow-y":"auto"
});

常用代碼集合