要实现的是人民网右侧导航的这种效果http://fujian.people.com.cn/
点击导航的选项后,页面会定位到指定的栏目模块中
这个是怎么实现的???
解决方案:
主要用到的方法是锚点
和跳转到页头差不多效果,只的多了锚点
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <script> lastScrollY = 0; function heartBeat() { var diffY; if (document.documentElement && document.documentElement.scrollTop) diffY = document.documentElement.scrollTop; else if (document.body) diffY = document.body.scrollTop; else { /*Netscape stuff*/ } percent = .1 * (diffY - lastScrollY); if (percent > 0) percent = Math.ceil(percent); else percent = Math.floor(percent); document.getElementById("web_ad").style.top = parseInt(document.getElementById("web_ad").style.top) + percent + "px"; lastScrollY = lastScrollY + percent; } suspendcode = "<DIV id="web_ad" style='right:100px;POSITION:absolute;TOP:100px; border:0px solid #ddd;'><a href='javascript:scroll(0,0)'>返回顶部</a><br><a href='#new' >新闻</a></div>"; document.write(suspendcode); window.setInterval("heartBeat()", 1); </script> </head> <body> <div style=" height::200px; padding-bottom:500xp;">消息 消息<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> </div> <div style=" height::200px;" id="new">新闻<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div> </body> </html>