一个乐于分享的博客
关注互联网折腾服务器分享码农的日常

jquery插件smooth-scroll实现网页间锚链接平滑滚动

jquery插件smooth-scroll实现网页间锚链接平滑滚动

网页制作中经常遇到同页面内的锚链接,即href="#top"这种链接。浏览器在处理这种链接时,会采用“一步到位”的形式,即点击页面立即跳转,用户体验很不友好,这时候就需要一款jQuery插件jquery-smooth-scroll来帮忙。

先看示例

跳到底部

实现方式

首先下载源码,地址:https://github.com/kswedberg/jquery-smooth-scroll

jquery-smooth-scroll其于jQuery,所以引用之前需要先引入jQuery。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>Smooth Scroll jQuery Plugin Demo</title>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="demo.css">
 <!--引入jQuery和jquery.smooth-scroll-->
 <script src="../lib/jquery/jquery.js"></script>
 <script src="../src/jquery.smooth-scroll.js"></script>
 </head>
<body>
</body>
</html>

初始化操作

1.页面中所有以#开头的a链接均运行smoochScroll,跳转到的目标即为href所指的位置。

$('a[href^=#]').smoothScroll();

2.点击元素时触发滚动。

$('button.scrollsomething').on('click', function() {
  $.smoothScroll();
  return false;
});

可用的选项和默认值

{
  //偏移量:默认滚动目标至页面顶端。如设置为-100,将会在上端空出100的间距
  offset: 0,

  //方向:可选 'top' 或 'left'
  direction: 'top',

  //滚动目标,设置此项可覆盖原有href目标
  scrollTarget: null,

  //滚动至目标位置时,自动获取焦点
  autoFocus: false,

  //用作事件委托选择器的字符串
  delegateSelector: null,

  //回调函数,滚动之前执行
  beforeScroll: function() {},

  //回调函数,滚动完成后执行
  afterScroll: function() {},

  //滚动效果可选 "swing" 和 "linear"。swing滚动效果为 慢-快-慢,linear滚动效果匀速滚动。 
  easing: 'swing',

  //滚动速度:自开始滚动至滚动到位所耗时,亦可设置为"auto"由程序自动计算滚动速度
  speed: 400,

  //自动滚动计算参数,仅当speed设置为auto时有效。数值越大速度越快。
  autoCoefficient: 2,

  //覆盖默认的点击事件
  preventDefault: true
}

了解这些选项之后,就可以设置更个性化的滚动。

进阶操作

设置滚动速度为1秒钟

$('a[href^=#]').smoothScroll({speed:1000});

有时页面有有固定的页头,占据120px的高度,滚动时避开头部。

$('a[href^=#]').smoothScroll({speed:1000,offset:-120});

滚动到目标位置时,显示提示信息。

$('a[href^=#]').smoothScroll({speed:1000,offset:-120,afterScroll:function(){
    showMsg();
}});

先看示例

跳到顶部

转载务必注明出处:岩兔站 » jquery插件smooth-scroll实现网页间锚链接平滑滚动
赞 (0) or 打赏

讨论区 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址