上面代码怎样实现div的跳转

下面代码怎样实现div的跳转？

HTML code

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;    &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;    &lt;title&gt;练习3.9.3&lt;/title&gt;    &lt;script type="text/javascript" src="/js/jquery.min.js" &gt;&lt;/script&gt;    &lt;script type="text/javascript"&gt;        $(document).keyup(function(event){            if(event.keyCode==39){                 //这里怎么写？            }        });    &lt;/script&gt;&lt;/head&gt;&lt;body&gt;&lt;div id="div1"&gt;&lt;span&gt;    div1&lt;/span&gt;&lt;/br&gt;&lt;/br&gt;&lt;/br&gt;&lt;/br&gt;&lt;/br&gt;&lt;/br&gt;&lt;/br&gt;&lt;/br&gt;&lt;/br&gt;&lt;/br&gt;&lt;/br&gt;&lt;/br&gt;&lt;/br&gt;&lt;/br&gt;&lt;/br&gt;&lt;/br&gt;&lt;/br&gt;&lt;/br&gt;&lt;/br&gt;&lt;/br&gt;&lt;/br&gt;&lt;/br&gt;&lt;/br&gt;&lt;/br&gt;&lt;/br&gt;&lt;/br&gt;&lt;/div&gt;&lt;div id="div2"&gt;&lt;span&gt;    div2&lt;/span&gt;&lt;/br&gt;&lt;/br&gt;&lt;/br&gt;&lt;/br&gt;&lt;/br&gt;&lt;/br&gt;&lt;/br&gt;&lt;/br&gt;&lt;/br&gt;&lt;/br&gt;&lt;/br&gt;&lt;/br&gt;&lt;/br&gt;&lt;/br&gt;&lt;/br&gt;&lt;/br&gt;&lt;/br&gt;&lt;/br&gt;&lt;/br&gt;&lt;/br&gt;&lt;/br&gt;&lt;/br&gt;&lt;/br&gt;&lt;/br&gt;&lt;/br&gt;&lt;/br&gt;&lt;/div&gt;&lt;div id="div3"&gt;&lt;span&gt;    div3&lt;/span&gt;&lt;/br&gt;&lt;/br&gt;&lt;/br&gt;&lt;/br&gt;&lt;/br&gt;&lt;/br&gt;&lt;/br&gt;&lt;/br&gt;&lt;/br&gt;&lt;/br&gt;&lt;/br&gt;&lt;/br&gt;&lt;/br&gt;&lt;/br&gt;&lt;/br&gt;&lt;/br&gt;&lt;/br&gt;&lt;/br&gt;&lt;/br&gt;&lt;/br&gt;&lt;/br&gt;&lt;/br&gt;&lt;/br&gt;&lt;/br&gt;&lt;/br&gt;&lt;/br&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;

我想要实现当按下向方向键的时候（键码为39），页面会从当前显示的div跳转到下一个div，就是页面向下滚动到下一个div的位置，如果当前div是最后一个，那么又会跳转到第一个div，即页面向上滚动到显示第一个div的位置。

[解决办法]

JScript code

    &lt;script type="text/javascript"&gt;              //获取元素相对于页面根元素的位置        var getOffsetTop = function(elem){            var height = elem.offsetTop;            while(elem.offsetParent){                elem = elem.offsetParent;                height += elem.offsetTop            }            return height;        };                //按下下键的时候，首先找到页面显示的目标div，再跳转到下一个div的位置        var skipToTarget = function(){            var divs = document.getElementsByTagName("div");            if(divs.length &lt; 1) return false;                        //遍历div元素            (function(){                for(var i = 0, len = divs.length; i &lt; len; i++){                                    var elem = divs[i],                                                //跳转的目标位置                        skipFlag = i + 1;                                             if( i == len - 1){                        skipFlag = 0;                    }                                        //通过判断元素在可视窗口显示的区域，确定目标div                        if(elem.offsetHeight - (document.documentElement.scrollTop - getOffsetTop(elem)) &gt;= 0){                                                //跳转                        location.hash = divs[skipFlag].id;                         break;                    }                                    }            })();        };                window.onload = function(){            document.onkeyup = function(event){                event = event ? event : window.event;                if(event.keyCode == 40){                    skipToTarget();                    }            };                };                 /*        $(document).keyup(function(event){            if(event.keyCode==39){            //在这里调用跳转函数                 skipToTarget();            }        });        */    &lt;/script&gt;
[解决办法]
JScript code 
 
    &lt;script type="text/javascript"&gt;        $(function(){            var i=0,count=$('body&gt;div').size();            $(document).keyup(function(event){                if(event.keyCode==39){                     i=i==count-1?0:(i+1);                     var top=$('div').eq(i).offset().top;                     window.scrollTo(0,top);                }            });        })    &lt;/script&gt;

上面代码怎样实现div的跳转

热点推荐