您的位置：首页 > 其它

如何实现页面右侧浮动导航？？？点击导航的选项后，页面会定位到指定的栏目模块中

2013-09-06 15:16 591 查看
要实现的是人民网右侧导航的这种效果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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航