JQUERY页面平滑滚动插件-JQUERY-SMOOTH-SCROLL

所属分类:其他-移动

 41141  41  查看评论 (4)
JQUERY页面平滑滚动插件-JQUERY-SMOOTH-SCROLL ie兼容6

相信大家都见过了诸如 回到顶部 和滑动到页面指定位置的效果,今天我我要给大家介绍的正是这样一款平滑滚动的jquery插件。

使用步骤

1、引入以下的js和css文件

 <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
 <script src="../src/jquery.smooth-scroll.js"></script>
 <script src="../lib/jquery.ba-bbq.js"></script>


2、在head标签中加入以下js代码

 $(function(){
  $("#btn").click(function(){
       $('a').smoothScroll({
          //参数列表
       });
   });
})


3、在body标签中加入相应的标签
插件说明
1、允许我们轻易地实现滑动到页面某个位置
2、可以这样来调用插件

 $('a').smoothScroll();


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

 $('#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!'); 
  }
});


9、可以添加一个按钮用来支持点击后回到之前的位置,实际上就是一个历史记录的作用

参数配置

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

单页面贴边式导航

jquery锚点移动,浮动导航
  移动
 18074  68

回到顶部插件-BACKTOTOP

BackToTop 是一款回到顶部的jquery插件,只需要引入js和css文件然后调用插件即可,当我们下拉滚动条的时候就会在屏幕的右上角出现一个回到顶部的按钮。
  移动
 14203  26

手机端多点触控图片旋转放大缩小移动

支持手机端的图片多点触控处理(放大,缩小,旋转)
  移动
 16314  36

移动端切换插件-swiper

移动端图片,tab等滑动切换
  移动
 103467  185

讨论这个项目(4)回答他人问题或分享插件使用方法奖励jQ币

    honey。 0
    2017/9/21 10:52:08

    我想问这是个什么东西

    回复
    二郎神 0
    2016/8/3 18:08:18
    我真是服了,具体怎么用啊! 回复
    倾_ 听 ? 0
    2016/1/28 14:01:15

    不够完善。

    滑动到某个位置。相对应的导航部分高亮就更好了。

    回复
    ITDragon博客 2
    2015/12/19 21:12:36

    下载不了了;

        西瓜0
        2015/12/20 0:12:35

        感谢反馈已经修改正确。

    回复
    風啟❦落時 0
    2015/3/21 9:22:21
    这个网页失效了。 回复
取消回复