返回頂部的3中方法(解決移動端使用zepto沒有滑動的效果)


點擊返回頂部,三種方法

1、這個方法jQuery使用正常,zepto使用沒有動畫

//zepto沒有動畫
$("body").animate({scrollTop: 0}, 500)
//zepto使用
$("body").scrollTop(0);

2、這個方法jQuery使用正常,zepto使用沒有動畫

window.scrollTo(0,0);

3、zepto使用可以有動畫

function goTop(acceleration, time) {
acceleration = acceleration || 0.1;
time = time || 16;
var x1 = 0;
var y1 = 0;
var x2 = 0;
var y2 = 0;
var x3 = 0;
var y3 = 0;
if (document.documentElement) {
x1 = document.documentElement.scrollLeft || 0;
y1 = document.documentElement.scrollTop || 0;
}
if (document.body) {
x2 = document.body.scrollLeft || 0;
y2 = document.body.scrollTop || 0;
}
var x3 = window.scrollX || 0;
var y3 = window.scrollY || 0;
// 滾動條到頁面頂部的水平距離
var x = Math.max(x1, Math.max(x2, x3));
// 滾動條到頁面頂部的垂直距離
var y = Math.max(y1, Math.max(y2, y3));
// 滾動距離 = 目前距離 / 速度, 因為距離原來越小, 速度是大於 1 的數, 所以滾動距離會越來越小
var speed = 1 + acceleration;
window.scrollTo(Math.floor(x / speed), Math.floor(y / speed));
// 如果距離不為零, 繼續調用迭代本函數
if (x > 0 || y > 0) {
var invokeFunction = "goTop(" + acceleration + ", " + time + ")";
window.setTimeout(invokeFunction, time);
}
}
$(".fix_go_top").on("click", function() {
    //$("body").scrollTop(0);
    //window.scrollTo(0,0);
    goTop();
});

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM