关于页面中对象位置的常用js方法-优快云博客

本文介绍了一个JavaScript方法，用于判断页面中对象的位置并自动调整滚动条，确保对象始终处于可见区域。通过计算对象与窗口边界的关系，实现无缝滚动体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关于页面中对象位置的常用js方法



/********************  
* 判断某对象是否在显示区域，若不在，则移动滚动条，让其显示
*******************/ 
function moveToOneMenu(objName)
{	
	var mendingTop=getObjWZ(objName)	//某对象在页面中的位置
	var sh=document.body.scrollTop   //滚动条离页面最上方距离
	var winH=getClientHeight()		//窗口高度

	if(mendingTop<=0)
		return;

	if(mendingTop+22-winH-sh > 0) //在下方未显
		window.scrollTo(0,mendingTop+22-winH);
	else if(mendingTop<sh) //在上方未显
		window.scrollTo(0,mendingTop);

}

/********************  
* 取某对象在页面中的上下位置：距顶部的距离   
*******************/ 
function getObjWZ(objName)
{
	var ob=document.getElementById(objName);
	if(!ob){return null;}
	var mendingOb = ob;
	var mendingTop = mendingOb .offsetTop;
	while( mendingOb != null && mendingOb .offsetParent != null && mendingOb .offsetParent.tagName != "BODY" ){
		mendingTop += mendingOb .offsetParent.offsetTop;
		mendingOb = mendingOb .offsetParent;
	}
	return mendingTop ;
}

/********************  
* 取窗口可视范围的高度   
*******************/ 
function getClientHeight()   
{   
	var clientHeight=0;   
	if(document.body.clientHeight&&document.documentElement.clientHeight)   
	{   
		var clientHeight = (document.body.clientHeight<document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;           
	}   
	else  
	{   
		var clientHeight = (document.body.clientHeight>document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;       
	}   
	return clientHeight;   
}