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>
  • 相关阅读:
    【Linux软件安装】
    Java IO(七)ByteArrayInputStream 和 ByteArrayOutputStream
    Java IO(六) ObjectInputStream 和 ObjectOutputStream
    Java IO(四) InputStream 和 OutputStream
    Java IO(五)字节流 FileInputStream 和 FileOutputStream
    Java IO(三)FileDescriptor
    Java IO(二)File
    Java IO(一)概述
    Java中的集合(十五) Iterator 和 ListIterator、Enumeration
    Java中的自动装箱拆箱
  • 原文地址:https://www.cnblogs.com/wenghaowen/p/3305530.html
Copyright © 2011-2022 走看看