在建站的过程中,我们难免遇到篇幅比较长的页面,这时候想看页面某个部分,如果是纯手动滚动那就略显笨拙
幸好JQ提供一个直接获取某盒子top位置的方法 offset() 该方法包含两个参数 top与left top与left构成一个坐标轴
offset().top为对象顶部的离窗口对象顶部的偏移量 offset().left为对象最左侧离窗口对象最左侧的偏移量
Talk is cheap,Show me the code
$(function(){
var scroll_offset=$("#site").offset(); //site为目标位置的ID
$(window).scroll(function(){
var scrolltop=$(this).scrollTop(); //获取当前页面顶部的坐标
if(scrolltop>=scroll_offset.top){ //将当前页面顶部top值与 目标位置的top值做比较
$(".scrollSite").show(); //当当前窗口顶部坐标大于目标位置时,按钮显示 否则隐藏按钮
}else{
$(".scrollSite").hide();
}
});
$(".scrollSite_btn").click(function(){ //scrollSite_btn 为触发该函数的组件的class(“样式用class,动作用id”,
$("html,body").animate({scrollTop:scroll_offset.top},500); // 利用scrollTop将页面顶部位置指定到某坐标
});
});
这样一段简易版点击按钮滚动到页面指定位置的code就完成啦