jquery点击竖向箭头网页自动下翻（jquery点击移动div）
作者：抖音小助手 浏览量：
时间：2024-05-09 16:55
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()函数完成动画滑动，可以实现我们期望的效果。
