版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/RodeStillFaraway/article/details/78614805
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- 引用百度JQuery -->
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
var jQuery=jQuery.noConflict();
// 单击控件使控件位于屏幕顶部三分之一处
function MouseLeftClick(event)
{
var tMouseNum = event.button; //具体值API
if(event && tMouseNum == 0){ // 单击 0鼠标左键 1鼠标中键 2鼠标右键 否则其他
var tElementId = event.srcElement.id ;
if(tElementId!=""||tElementId!=null){
scrollPosition(tElementId) ;
}
}
}
// // Tab切换事件
// document.onkeypress=function(event){
// var e = event || window.event || arguments.callee.caller.arguments[0];
// if(e && e.keyCode==9){ // 按 Tab
// var tElementId = event.srcElement.id;
// if(tElementId!=""||tElementId!=null){
// scrollPosition(tElementId) ;
// }else{
// alert("ddd"+tElementId);
// }
// }
// };
// 控制页面滚动到指定位置
function scrollPosition(pElementId) {
var tTop = jQuery("#"+pElementId).offset().top; //得到控件Top
var tWindowHeight = jQuery(window).height(); //浏览器可视窗口高度
var tElementHeight = jQuery("#"+pElementId).height(); //控件高度
var tScrollTop = tTop-tWindowHeight*0.3-tElementHeight*0.5; //让控件中心位于可视窗口3分之1处
jQuery('html, body').animate({
scrollTop: tScrollTop
}, 1000);
}
</script>
</head>
<body onmousedown="MouseLeftClick(event)">
<div style="margin:0 auto;border:1px solid #000;width:180px;height:1600px">
<br><br><br><br><br><br><br><br><br><br><br><br>
<input id="1" tabindex="1" value="切换第一个" /><br><br><br><br><br><br><br><br><br><br>
<input id="4" tabindex="4" value="切换第四个" /><br><br><br><br><br><br><br><br><br><br>
<input id="2" tabindex="2" value="切换第二个" /><br><br><br><br><br><br><br><br><br><br>
<input id="5" tabindex="5" value="切换第五个" /><br><br><br><br><br><br><br><br><br><br>
<input id="3" tabindex="3" value="切换第三个" /><br><br><br><br><br><br><br><br><br><br>
<input id="6" tabindex="6" value="切换第六个" /><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</body>
</html>