请在Chrome、Firefox等现代浏览器浏览本站。网站域名:森林之家(www.foresthouse.cn)爱学习、爱分享、爱绿软、爱恐怖、爱音乐、爱唠叨、爱折腾、爱生活!

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

web-build forest 713℃ 已收录 1评论

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

在网页中有许多人性化的地方比如点击一个按钮或者一个图标可以自动定位到网页中的某一个地方,不用在整个网页中寻找达到快速导航的效果,许多被用在留言、导航、评论等功能处。

第一步:在首页head地方引用“jquery.min.js”;

<script language="javascript" type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
第二步:随便找个位置加入以下运行函数;
<script language="javascript" type="text/javascript"> function movetomsg() { $("html,body").animate({ scrollTop: $("#replyBox").offset().top },3000);//定位到replyBox处,速度为3000 }
</script>
第三步:在需要被定位的位置加入一个ID;
<div id="replyBox">定位到这里</div>
第四步:添加一个按钮以达到鼠标点击这个按钮的时候函数被运行进而定位到相应位置(下面二种参考);
<a href='javascript:movetomsg();'>按钮</a>
<img onclick="movetomsg()" src="anniu.png"/>

演示效果

本站文章如未注明,均为原创丨本网站采用BY-NC-SA协议进行授权,转载请注明转自:https://www.foresthouse.cn/archives/5582.html
喜欢 (2)or分享 (0)
发表我的评论(注:在您评论完以后不会立即显示,请不要重复刷新以免进入黑名单。)
取消评论
表情 代码 贴图 加粗 链接 私信 删除线 签到

Hi,请填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(1)条精彩评论。
  1. 新年好呀,新年好呀,祝福博主新年好!来自天朝的朋友 搜狗浏览器 Windows 7
    八达网2018年-01月-02日发表回复| Google Chrome 14.0.802.30| Windows 7