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,则是横向跳转

原文地址:https://www.cnblogs.com/lanmoxiaozhu/p/3287215.html