zoukankan      html  css  js  c++  java
  • 如何实现页面右侧浮动导航???点击导航的选项后,页面会定位到指定的栏目模块中

    要实现的是人民网右侧导航的这种效果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>
  • 相关阅读:
    20165225《Java程序设计》第六周学习总结
    实验一 Java开发环境的熟悉
    20165225《Java程序设计》第五周学习总结
    移动web——bootstrap响应式工具
    移动web——bootstrap栅格系统
    移动web——bootstrap模板
    移动web——媒体查询
    移动web——轮播图
    移动web——touch事件应用
    移动web——touch事件介绍
  • 原文地址:https://www.cnblogs.com/wenghaowen/p/3305530.html
Copyright © 2011-2022 走看看