某些情况下需要回到顶部,除了常见的点击锚点回到顶部外,ajax加载分了多页后切换内容时快速回到顶部的方式可以通过修改浏览器的视图定位实现。
问题描述:某个商品列表页面有多个平台可以切换,采用了滚动分页加载更多的模式进行流式加载,当某个平台的商品分了多页后切换另外的平台时导致新平台的数据被同时请求多个分页,导致大量的数据出现并且没有回到顶部。
解决:百度一下,找了几个都不好使,没有效果。最后在滚动加载前面提取了一个强制设置的,这样就很顺利地平滑切换又不多次加载。
核心:
document.body.scrollTop = document.documentElement.scrollTop = 0; document.body.offsetHeight = document.documentElement.scrollHeight = 0; //也可以用scrollTop(0,0);//快速定位到左上角坐标
栗子:
//滑动到底部时自动加载分页
$(".goods-lists-content").on("scroll",function (e) {
var sheight = e.currentTarget.scrollHeight;//页面高度
var viewHgieht = e.currentTarget.offsetHeight;//可见高度
var top = e.currentTarget.scrollTop;//滚动高度
if((top + viewHgieht) > (sheight - 50 ) ){
getData();//获取数据逻辑...
}
});
//切换时的逻辑
/*点击切换平台*/
$(".from").click(function (){
var nfrom = $(this).data('tag');
$(".from").removeClass('on');
$(this).addClass('on')
if (nfrom==from){
return '';
}
from = nfrom;
page = 0;//初始化
$("#goods-list-container").html('');
//下面这两个是核心
document.body.scrollTop = document.documentElement.scrollTop = 0;
document.body.offsetHeight = document.documentElement.scrollHeight = 0;
getData();//获取新平台数据逻辑
});