码迷,mamicode.com
首页 > Web开发 > 详细

页面中的平滑滚动——smooth-scroll.js的使用

时间:2017-06-04 20:07:09      阅读:300      评论:0      收藏:0      [点我收藏+]

标签:lin   smo   push   script   read   targe   class   hang   title   

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

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

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

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

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

$(‘a‘).smoothScroll({});

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

$(‘#container a‘).smoothScroll();

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

$(‘#container a‘).smoothScroll({
     excludeWithin: [‘.container2‘]
});

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

$(‘a‘).smoothScroll({
    exclude: [‘.rough‘,‘#chunky‘]
});

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

$(‘.backtotop‘).smoothScroll({
   offset: -100
});

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

$(‘a‘).smoothScroll({
   beforeScroll: function() {
      alert(‘ready to go!‘); 
    }
});

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

 $(‘a‘).smoothScroll({
  afterScroll: function() {
     alert(‘we made it!‘); 
  }
});

你也可以自己配置参数

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

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

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

 

<script>
    $(document)
    .on(‘click‘, ‘a[href*="#"]‘, function() {
      if ( this.hash ) {
        $.bbq.pushState( ‘#/‘ + this.hash.slice(1) );
        return false;
      }
    })
    .ready(function() {
      $(window).bind(‘hashchange‘, function(event) {
        var tgt = location.hash.replace(/^#\/?/,‘‘);
        if ( document.getElementById(tgt) ) {
          $.smoothScroll({scrollTarget: ‘#‘ + tgt});
        }
      });

      $(window).trigger(‘hashchange‘);
    });
  </script>

 

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

<a href="#a1">Technology</a>
<div id="a1">
</div>

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

页面中的平滑滚动——smooth-scroll.js的使用

标签:lin   smo   push   script   read   targe   class   hang   title   

原文地址:http://www.cnblogs.com/cherishli/p/6941251.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!