jquery点击竖向箭头网页自动下翻(jquery点击移动div)
1.通过JQuery的click()方法获取被点击的箭头事件,并定义一个变量来记录当前位置:// 定义变量保存目前的位置var curPos=0;// 给箭头设置点击事件$('#arrow').clic...
1.通过JQuery的click()方法获取被点击的箭头事件,并定义一个变量来记录当前位置:
// 定义变量保存目前的位置
var curPos=0;
// 给箭头设置点击事件
$('#arrow').click(function(){
// 每次点击,让curPos的值增加50
curPos+=50;
// 设置网页内容自动下滑
$('html,body').animate({scrollTop:curPos}, 1000);
});
2.使用JQuery的scrollTop()方法来指定网页内容浏览(滚动)至特定位置:
// 存储每次被点击的箭头的位置
var curPos=0;
// 给箭头设置点击事件
$('#arrow').click(function(){
// 每次点击,让curPos的值增加50
curPos+=50;
// 设置网页内容自动下滑
$('html').scrollTop(curPos);
});
3.使用window.scrollTo()方法实现网页内容自动下滑:
// 存储每次被点击的箭头的位置
var curPos=0;
// 给箭头设置点击事件
$('#arrow').click(function(){
// 每次点击,让curPos的值增加50
curPos+=50;
// 设置网页内容自动下滑
window.scrollTo(0, curPos);
});
综上,可以利用“JQuery点击竖向箭头网页自动下翻”的实现方式来实现页面自动下滑,是使用click()方法、scrollTop()方法和window.scrollTo()方法三种方式可以获取被点击的箭头事件,并且定义一个变量来指定网页内容浏览(滚动)至特定位置,从而实现页面的自动下滑的效果。
一、jquery点击竖向箭头网页自动下翻
1、定义竖向箭头相关div:如果要在网页上使用点击竖向箭头网页自动下翻的功能,首先要定义竖向箭头div和其相关样式,代码如下:
竖向箭头
2、jquery ajax请求后台翻页数据:在触发竖向箭头时我们执行ajax调用后台接口,获取需要的翻页数据进行处理,代码如下:
var page = 1; // 根据页面业务而定
$.ajax({
url: 'xxx.do',
data:{
'page':page
},
success: function(resp) {
//根据返回数据执行相应更改
}
});
3、绑定点击竖向箭头功能:绑定竖向箭头点击事件,触发ajax请求后台数据,向下翻页,代码如下:
$("#updown-btn .toupbtn").on("click", function(){
page += 1;
$.ajax({
url: 'xxx.do',
data:{
'page':page
},
success: function(resp) {
//根据返回数据执行相应更改
}
});
});
4、进行竖向页面滚动:获取当前网页的滚动条位置,然后使用jquery的animate()函数进行动画的滚动,新页面自动向下滑动条,代码如下:
//查找滚动条所在位置
var scrollTop = document.body.scrollTop||document.documentElement.scrollTop;
//使用jquery的animate()函数进行动画滚动
$("html,body").animate({
scrollTop:scrollTop+500 //滑动500像素
},1000);//动画滑动时间1秒
5、完善竖向箭头其他功能:完善竖向箭头的其他功能,比如自动运动如果网页滚动到最下方时竖向箭头自动消失、滑动条滚动到一定高度时箭头自动出现等,相关代码如下:
// 监听滑动条
$(window).scroll(function(){
var scrollTop=$(this).scrollTop();//滚动条距离顶部的高度
var scrollHeight=$(document).height();//当前页面的总高度
var windowHeight=$(this).height();//当前可视的页面高度
// 滚动条到底部
if((scrollTop+windowHeight)==scrollHeight){
// 根据页面业务而定,可以提前将获取数据的函数条用在这里面。
// 条用ajax请求后台数据
//查找滚动条所在位置
var scrollTop = document.body.scrollTop||document.documentElement.scrollTop;
//使用jquery的animate()函数进行动画滚动
$("html,body").animate({
scrollTop:scrollTop+500 //滑动500像素
},1000);//动画滑动时间1秒
// 箭头消失
$('#updown-btn').hide();
};
//当滚动条的高度大于100时,出现箭头
if(scrollTop>100){
$('#updown-btn').show();
}else{
$('#updown-btn').hide();
};
});
以上就是jquery点击竖向箭头实现网页自动下翻的具体实现步骤,通过jquery的DOM操作,对以及ajax请求数据,使用animate()函数完成动画滑动,可以实现我们期望的效果。