欢迎来到361模板(www.ke361.com),原创精品织梦模板提供商。 网站托管 桌面收藏 网站定制

361模板网

当前位置:361模板网 > 技术文档 > 程序代码 > jquery定位 网页定位新方法
这篇文章主要为大家详细介绍了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定位效果

以上就是本文的全部内容,希望对大家的学习和解决疑问有所帮助,也希望大家多多支持361源码网。

感谢打赏,我们会为大家提供更多优质资源!

热词标签: jquery 定位 锚点定位 jquery定位 网页定位

上一篇php 判断复选框checkbox是否被选中

下一篇div+css实现电脑端显示手机端隐藏代码

取消

感谢您的支持,我们会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

Powered by361模板网,分享从这里开始,精彩与您同在