• 请在Chrome、Firefox等现代浏览器浏览本站。网站域名:蘑菇屋(www.home007z.com)
  • 当前时间是:

jquery定位 四步实现网页定位导航效果

Web前端应用 Arnol 浏览 已收录 评论
在网页中有许多人性化的地方比如点击一个按钮或者一个图标可以自动定位到网页中的某一个地方,不用在整个网页中寻找达到快速导航的效果,许多被用在留言、导航、评论等功能处。
第一步:在首页head地方引用“jquery.min.js”;
  1. <script language="javascript" type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
第二步:随便找个位置加入以下运行函数;
  1. <script language="javascript" type="text/javascript"> function movetomsg() { $("html,body").animate({ scrollTop: $("#replyBox").offset().top },3000);//定位到replyBox处,速度为3000 }
  2. </script>
第三步:在需要被定位的位置加入一个ID;
  1. <div id="replyBox">定位到这里</div>
第四步:添加一个按钮以达到鼠标点击这个按钮的时候函数被运行进而定位到相应位置(下面二种参考);
  1. <a href='javascript:movetomsg();'>按钮</a>
  1. <img onclick="movetomsg()" src="anniu.png"/>

TOP