首页 > 扩展 > jQuery > 正文

jquery定位 网页定位新方法

2024-09-06 20:04:44
字体:
来源:转载
供稿:网友
这篇文章主要为大家详细介绍了jquery定位 网页定位新方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴。

网页定位在网站建设中使用十分普遍,尤其是单页面网站的导航定位就更是家常便饭。提及到网页定位,我们第一时间想到的就是锚点的网页定位功能,这也是不少人经常使用的。但是细心和高要求的你可能发现了这样一种情况:描点网页定位的定位效果不能实现平滑的移动,显得比较突兀,对于要求比较高的用户来说不是十分满意,这也是今天361源码介绍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"/>

这样就完成了。是不是很简单啊,下面我们就看看具体的效果吧。


锚点定位效果 jquery定位效果

以上就是jquery定位 网页定位新方法的全部内容,希望对大家的学习和解决疑问有所帮助,也希望大家多多支持武林网。
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表