将平滑滚动添加到网页 jQuery ksmoothscroll.js

  • 源码大小:8.71KB
  • 所需积分:1积分
  • 源码编号:19JP-3210
  • 浏览次数:533次
  • 最后更新:2023年05月18日
  • 所属栏目:动画
我要下载
加入收藏
本站默认解压密码:19jp.com 或 19jp_com

简介

ksmoothscroll.js是一个超轻(约1kb)的jQuery插件,它提供了一种简单的方法,可以为您的网页添加可配置的平滑滚动体验。

它允许您轻松配置滚动动画的持续时间,从各种放松功能中进行选择,设置顶部偏移等。还支持定位链接和相对链接。

如何使用它:

1.下载ksmoothscroll插件的缩小版,并将其放在jQuery之后。

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="jquery.ksmoothscroll.min.js"></script>

2.调用该函数,插件将自动将平滑滚动动画应用于特定容器中的所有锚链接和相对链接。

$(function(){
  $('body').kSmoothScroll({
    // options here
  });
})

3.配置滚动动画的持续时间。默认值:1000ms。

$(function(){
  $('body').kSmoothScroll({
    duration: 500
  });
})

4.对滚动动画应用缓和功能。您可能需要第三方缓解库(如jQueryUI和jQuery.leasing)来实现高级缓解功能。

$(function(){
  $('body').kSmoothScroll({
    easing: "swing"
  });
})

5.当页面上有固定的页眉导航时,设置顶部偏移。

$(function(){
  $('body').kSmoothScroll({
    easing: "swing",
    fixedHeaderHeight: 60,
    fixedHeaderSelector: ".header-offset:visible",
  });
})

预览截图