HTML+JS之点击按钮滚动到页面指定位置

在建站的过程中，我们难免遇到篇幅比较长的页面，这时候想看页面某个部分，如果是纯手动滚动那就略显笨拙

幸好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就完成啦