正常的本页面锚链接跳转的时候跟PPT似的,特别生硬,用户体验非常差。

这时候我们就可以借助smooth-scroll.js这个插件,来实现本页面的平滑的跳转。

1首先,导入必须的JS文件

  1. <script src="js/jquery-1.10.2.js"></script>
  2. <script src="js/jquery.smooth-scroll.min.js"></script>
  3. <script src="js/jquery.ba-bbq.js"></script>

2我们可以这样来调用插件

  1. $('a').smoothScroll({});

3可以根据自己的需要指定一个外部容器,那么滚动就是在这个(#container)容器内发生,而不是在页面级别发生了

  1. $('#container a').smoothScroll();

4我们可以可以通过下面的方式来排除指定容器的包含元素

  1. $('#container a').smoothScroll({
  2. excludeWithin: ['.container2']
  3. });

5通过下面的语句来排除满足指定条件的元素

  1. $('a').smoothScroll({
  2. exclude: ['.rough','#chunky']
  3. });

6调整滑动到哪个位置就停止

  1. $('.backtotop').smoothScroll({
  2. offset: -100
  3. });

7设定一个滑动开始之前的回调函数

  1. $('a').smoothScroll({
  2. beforeScroll: function() {
  3. alert('ready to go!');
  4. }
  5. });

8设定一个滑动结束的回调函数

  1. $('a').smoothScroll({
  2. afterScroll: function() {
  3. alert('we made it!');
  4. }
  5. });

你也可以自己配置参数

  1. $.smoothScroll({
  2. //滑动到的位置的偏移量
  3. offset: 0,
  4. //滑动的方向,可取 'top' 或 'left'
  5. direction: 'top',
  6. // 只有当你想重写默认行为的时候才会用到
  7. scrollTarget: null,
  8. // 滑动开始前的回调函数。`this` 代表正在被滚动的元素
  9. beforeScroll: function() {},
  10. //滑动完成后的回调函数。 `this` 代表触发滑动的元素
  11. afterScroll: function() {},
  12. //缓动效果
  13. easing: 'swing',
  14. //滑动的速度
  15. speed: 400,
  16. // "自动" 加速的系数
  17. autoCoefficent: 2
  18. });

什么?没看懂??没关系!!下边还有一波无脑操作!

只需要把文件导入后,将下边的代码copy进去就可以了,便可轻松实现页面中的平滑滚动

  1. <script>
  2. $(document)
  3. .on('click', 'a[href*="#"]', function() {
  4. if ( this.hash ) {
  5. $.bbq.pushState( '#/' + this.hash.slice(1) );
  6. return false;
  7. }
  8. })
  9. .ready(function() {
  10. $(window).bind('hashchange', function(event) {
  11. var tgt = location.hash.replace(/^#\/?/,'');
  12. if ( document.getElementById(tgt) ) {
  13. $.smoothScroll({scrollTarget: '#' + tgt});
  14. }
  15. });
  16.  
  17. $(window).trigger('hashchange');
  18. });
  19. </script>

下面就是点击technolog滑动到 id为a1的div区,简单吧!

  1. <a href="#a1">Technology</a>
  2. <div id="a1">
  3. </div>

smooth-scroll.js的下载地址?网上好多好多,找不到正确的?留言邮箱啊,博主服务一条龙。。。

页面中的平滑滚动——smooth-scroll.js的使用的更多相关文章

  1. 移动设备的HTML页面中图片实现滚动加载

    如今移动互联网风靡全球,移动页面的元素也是丰富多彩,一个移动页面的图片超过10张已经是再正常不过的事情了.但是相对,很多移动用户还停留在2G,3G这样的网络中.那么这样带宽的用户,在浏览这样的页面时, ...

  2. 页面中php传值后循环列表js获取点击的id

    页面中php传值后循环列表js获取点击的id值进行js操作 <script type="text/javascript" src="__PUBLIC__/js/jq ...

  3. js文件需要jsp页面中的div时,此js文件必须在div之后才能获得值,否则获取不到

    js文件需要jsp页面中的div时,此js文件必须在div之后才能获得值,否则获取不到 2.图2的内容为directionkey.js的内容

  4. 在WPF中实现平滑滚动

    WPF实现滚动条还是比较方便的,只要在控件外围加上ScrollViewer即可,但美中不足的是:滚动的时候没有动画效果.在滚动的时候添加过渡动画能给我们的软件增色不少,例如Office 2013的滚动 ...

  5. 如何在pyqt中实现平滑滚动的QScrollArea

    平滑滚动的视觉效果 Qt 自带的 QScrollArea 滚动时只能在两个像素节点之间跳变,看起来很突兀.刚开始试着用 QPropertyAnimation 来实现平滑滚动,但是效果不太理想.所以直接 ...

  6. JS 在open打开的子窗口页面中调用父窗口页面的JS方法

    需求的情景如下: 1:做新增或修改等操作的时候打开一个新的浏览器窗口(使用window.open(参数等)方法) 2:在新增或修改等的页面上有返回按钮.重置按钮.保存按钮,对于返回就直接关闭此窗口(使 ...

  7. html页面中引入自签名证书的js web资源出现net::ERR_CERT_AUTHORITY_INVALID

    其实是浏览器客户端对自签名的内容认为不安全引起的,临时方法可以再浏览器中先直接访问下那个自签名的https地址,然后再访问有引用的那个页面就可以了. 以下内容引用自https://www.morong ...

  8. 前端:微信支付和支付宝支付在pc端和h5页面中的应用

    1:h5微信支付 使用的是https://pay.weixin.qq.com/wiki/doc/api/index.html  中的 (1):公司需要首先要配置公众号微信支付地址和测试白名单(支付的时 ...

  9. 原生js 平滑滚动到页面的某个位置

    window.scrollTo() 语法1:  window.scrollTo(x-coord,y-coord) x-coord 是文档中的横轴坐标. y-coord 是文档中的纵轴坐标. 例子: w ...

随机推荐

  1. finally块执行时间

    finally块在代码中什么时候被执行? 在Java语言的异常处理中,finally块的作用十九为了保证无论出现什么情况,finally块里面的代码一定会被执行.由于程序执行return就以为这结束对 ...

  2. 使用canvas实现擦除效果

    HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像.画布是一个矩形区域,您可以控制其每一像素.canvas 拥有多种绘制路径.矩形.圆形.字符以及添加图像的方法. html ...

  3. 【日常】C++ 的那些“坑” —— delete 与 析构函数 与 virtual 的 9 个小例子

    C++中有无数的坑,但毕竟-- 今天就踩到了,也算是基本问题了,记录一下,顺便以后可以考考自己.你也可以猜猜答案,大牛绕行. 0x1 先看这个: #include <stdio.h> #i ...

  4. (知识点)JavaScript闭包

    下面是我对闭包的理解:(把他们整理出来,整理的过程也是在梳理) 1.首先,在理解闭包之前: 我们首先应该清楚下作用域和作用域链 作用域:每个函数定义时创建时自己的环境即作用域 作用域链:函数内可访问自 ...

  5. [进程管理] Linux中Load average的理解

    Load average的定义 系统平均负载被定义为在特定时间间隔内运行队列中的平均进程树.如果一个进程满足以下条件则其就会位于运行队列中: - 它没有在等待I/O操作的结果 - 它没有主动进入等待状 ...

  6. SectionIndexer 利用系统的控件,制作比较美观的侧栏索引控件

    如上图所示,右侧的索引是系统提供的,具体使用方法,请搜索: SectionIndexer 相关的资料进行开发.

  7. MySQL游标的简单实践

    Q:为什么要使用游标? A: 在存储过程(或函数)中,如果某条select语句返回的结果集中只有1行,可以使用select into语句(上几篇博客有介绍到用法)来得到该行进行处理:如果结果集中有多行 ...

  8. ST-4

    1.(49-7)使用下面的方法printPrimes()完成后面的问题: (a)为printPrimes()方法画控制流图. (b)考虑测试用例t1=(n=3)和t2=(n=5).即使这些测试用例游历 ...

  9. redis多数据库操作

    redis下,数据库是由一个整数索引标识,而不是由一个数据库名称.默认情况下,一个客户端连接到数据库0. redis配置文件中下面的参数来控制数据库总数: databases 16   [root@M ...

  10. 深入浅出理解yield

    索引 转载部分内容来自:http://www.jianshu.com/p/d09778f4e055 [彻底理解yield] http://blog.csdn.net/haskei/article/de ...