网页制作中经常遇到同页面内的锚链接,即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(); }});