zoukankan      html  css  js  c++  java
  • jQuery实现页内锚点平滑跳转

    当页面内容长多,导致页面高度过高或过宽是,浏览起来就有点费劲,不过使用了锚点平滑跳转效果可以实现页面的跳转,从而加快速浏览想要浏览的模块。具体做法如下:

    首先是菜单(锚点)的写法

    <a href="#div1" id="adiv1">菜单1</a>
    <a href="#div1" id="adiv2">菜单2</a>
    <a href="#div1" id="adiv3">菜单3</a>

    其次是内容(锚点指向的模块)的写法

    <div id="div1">内容1</div>
    <div id="div2">内容2</div>
    <div id="div3">内容3</div>

    最后是jquery的脚本调用方法

     <script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>
     <script language="javascript" type="text/javascript">
        $(function(){
           $("#adiv1").anchorGoWhere({target:1});
           $("#adiv2").anchorGoWhere({target:1});
           $("#adiv3").anchorGoWhere({target:1});
        });
     </script>

    $("#adiv...") 是根据id找到锚点(也可以用别的方法找到锚点,这里为了方便采用的id),anchorGoWhere就是锚点跳转的实现方法,里面的target参数为跳转的类型,如果是1,则是纵向的跳转;如果是2,则是横向跳转

  • 相关阅读:
    接口和抽象类的区别联系(一)
    股指期货-基础知识
    A股魔咒
    .NET 分布式架构
    Spring Cloud Netflix
    现货、期货、期权、权证
    复盘-20190321
    复盘思考
    公司法
    2019年行情思考
  • 原文地址:https://www.cnblogs.com/lanmoxiaozhu/p/3287215.html
Copyright © 2011-2022 走看看