jQuery下锚点的平滑跳转
对于锚点的平滑跳转,我觉得要谨慎使用,在个人站点或是这个效果含有功能提示可以用一用,在一般的商业性质的网站上,权衡来讲,不用更好,当然,这只是我的个人意见。jQuery库已经为我们做了很多的工作了,所以,在jQuery下实现锚点的平滑跳转是简单轻松的。例如,我们要让页面平滑滚动到一个id为box的元素处,则jQuery代码只要一句话,如下:
$("html,body").animate({scrollTop: $("#box").offset().top}, 1000);
jQuery下锚点的平滑跳转的更多相关文章
- jQuery之锚点带动画跳转特效
背景图片为金木研,这是我最爱的一张图. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...
- jQuery实现页面内锚点平滑跳转
平时我们做导航滚动到内容都是通过锚点来做,刷的一下就直接跳到内容了,没有一丝的滚动效果,而且 url 链接最后会有“小尾巴”,就像#keleyi,今天我就介绍一款 jquery 做的滚动的特效,既可以 ...
- 【前端】jQuery实现锚点向下平滑滚动特效
jQuery实现锚点向下平滑滚动特效 实现效果: 实现原理: 使用jQuery animate()方法实现页面平滑滚动特效 $('html, body').animate({scrollTop: $( ...
- jQuery实现页内锚点平滑跳转
当页面内容长多,导致页面高度过高或过宽是,浏览起来就有点费劲,不过使用了锚点平滑跳转效果可以实现页面的跳转,从而加快速浏览想要浏览的模块.具体做法如下: 首先是菜单(锚点)的写法 <a href ...
- a标签锚点平滑跳转
一.创建锚点 <div class="header" id="top">//终点标签,添加一个id <a href="#top&qu ...
- JQuery 实现 锚点跳转
$('.nav-jump').click(function() { $('html,body').animate( { scrollTop:$($.attr(this, 'href')).offset ...
- 基于jquery的锚点滚动插件(百度百科效果) anchorScroll.js
1.插进使用场景 请打开https://baike.baidu.com/item/%E6%97%A5%E6%9C%AC%E5%8A%A8%E7%94%BB#hotspotmining,查看百度百科页面 ...
- 【WEB】jQuery获取页面回滚或跳转事件
1.效果: 2.Jquery: //记得引入jquery.min.js <script type="text/javascript"> $(function(){ wi ...
- 可控制导航下拉方向的jQuery下拉菜单代码
效果:http://hovertree.com/texiao/nav/1/ 代码如下: <!DOCTYPE html> <html> <head> <meta ...
随机推荐
- 会话控制——Cookie和Session
Cookie简介 l HTTP是无状态协议,服务器不能记录浏览器的访问状态,也就是说服务器不能区分中两次请求是否由一个客户端发出.这样的设计严重阻碍的Web程序的设计.如:在我们进行网购时,买了一条 ...
- Java中如何序列化一个对象(转)
转自:http://blog.csdn.net/chx10051413/article/details/40784667 http://www.cnblogs.com/baoendemao/p/380 ...
- 对近期docker学习的总结
Docker 总结 1. 说在前头(Docker命令的格式) docker中的对象分为4个(就目前我所学到的) 镜像 image 容器 container 网络 network 数据卷 volume ...
- PHP基础(9.27 第十三天)
什么是PHP,为什么要学习PHP: (1)php是嵌入html页面中的脚本语言 (2)目前最流行的网站开发语言 (3)在几乎所有平台中都可以运行 (4)很多企业都在使用PHP作为开发语言 P ...
- oracle(3)select语句中常用的关键字说明
1.select 查询表中的数据 select * from stu: ---查询stu表所有的数据,*代表所有2.dual ,伪表,要查询的数据不存在任何表中时使用 select sysdate f ...
- 当chart图遇上bootstrap的TAB切换 无宽高问题?
.tab-content > .tab-pane, .pill-content > .pill-pane { display: block; /* undo display:none ...
- IBGP(内部BGP)的对等体组(命令解析)
IBGP(内部BGP)对等体组配置解析: ①:创建对等体组. ②:定义对等体组策略,指定邻居路由器及所在的AS. ③:定义,更新源. ④:(若边界)定义自己下一跳. ⑤:加入对等体组. IBGP(内部 ...
- PowerDesigner 破解版,汉化包!
链接:https://pan.baidu.com/s/1R_6g6keo2Y4_V0c1ImeFbA 密码:ncju
- Java IO 乱码
InputStreamReader isr = new InputStreamReader(new FileInputStream("./test/垃圾短信训练集80W条.txt" ...
- 04 Unity2D
Unity2D系统是Unity引擎进行2D制作时使用的 Sprite精灵:在Unity2D制作中将图片称作精灵(Sprite),为了提高游戏效率,降低对GPU的损耗,通常将一类的图片拼接成一张大图来使 ...