一、jquery返回顶部
$("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');
});
//改进版 手机移动端手指的上滑、下滑、左滑和右滑操作
$("body").on("touchstart", function(e) {
e.preventDefault();
startX = e.originalEvent.changedTouches[0].pageX,
startY = e.originalEvent.changedTouches[0].pageY;
});
$("body").on("touchmove", function(e) {
e.preventDefault();
moveEndX = e.originalEvent.changedTouches[0].pageX,
moveEndY = e.originalEvent.changedTouches[0].pageY,
X = moveEndX - startX,
Y = moveEndY - startY;
if ( Math.abs(X) > Math.abs(Y) && X > 0 ) {
alert("left 2 right");
}
else if ( Math.abs(X) > Math.abs(Y) && X < 0 ) {
alert("right 2 left");
}
else if ( Math.abs(Y) > Math.abs(X) && Y > 0) {
alert("top 2 bottom");
}
else if ( Math.abs(Y) > Math.abs(X) && Y < 0 ) {
alert("bottom 2 top");
}
else{
alert("just touch");
}
});
var windowHeight = $(window).height(),
$body = $("body");
$body.css("height", windowHeight);三、js判断移动端屏幕的滑动方向
//滑动处理
var startX, startY;
document.addEventListener('touchstart',function (ev) {
startX = ev.touches[0].pageX;
startY = ev.touches[0].pageY;
}, false);
document.addEventListener('touchend',function (ev) {
var endX, endY;
endX = ev.changedTouches[0].pageX;
endY = ev.changedTouches[0].pageY;
var direction = GetSlideDirection(startX, startY, endX, endY);
switch(direction) {
case 0:
alert("无操作");
break;
case 1:
// 向上
alert("up");
break;
case 2:
// 向下
alert("down");
break;
default:
}
}, false);
function GetSlideDirection(startX, startY, endX, endY) {
var dy = startY - endY;
//var dx = endX - startX;
var result = 0;
if(dy>0) {//向上滑动
result=1;
}else if(dy<0){//向下滑动
result=2;
}
else
{
result=0;
}
return result;
}四、页面移动到对应位置开始执行动画
橙色容器从下方进入可视区域时(或者进入一段高度后)，容器内的动画播放。
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"
});六、移动端向上滑动获取下一页数据
上图的用户列表1代表的就是整个窗口的高度，2代表的是整个列表的高度（当然列表是可以上滑的） $(document)的值就是2加上头部和底部的高度
var currentPage = 1;//初始化第一页
/* 手机端向下滑动获取数据 */
var scrollHeight;//记录已经向上滑动的高度
$(window).scroll(function() {//当div向上滑动时便会执行或者这个方法
//这是整个窗口的高度
var windowHeight = parseFloat($(window).height());
//列表滑动的高度
scrollHeight = parseFloat($(window).scrollTop())
var totalheight = windowHeight + scrollHeight;
//$(document)代表的是列表的高度加上头部底部的高度
//如果$(document)的高度小于了窗口的高度加上滑动的高度
if ($(document).height() <= totalheight) {
//如果flag是flase就不会继续请求了，比如说请求到了最后一页
if (flag) {
flag=false;
currentPage = currentPage + 1;
$("#page_tag_load").show();
//getRedemList()是获取新的数据 currentPage 会加1
setTimeout('getRedemList(' + currentPage + ')', 1000);
}
}
}
});