JQuery控制屏幕滚动到指定控件位置

来源：互联网发布：王者荣耀聊天软件编辑：程序博客网时间：2024/06/14 05:31
<!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>
阅读全文
0 0