[转帖]Mootools源码分析-46 -- SmoothScroll

最新推荐文章于 2020-12-25 10:59:29 发布

转载最新推荐文章于 2020-12-25 10:59:29 发布 · 124 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/maapaa/articles/mootools-s-46.html

本文介绍了一个基于 MooTools 框架的平滑滚动插件，该插件能够实现页面锚点链接的平滑滚动效果，并提供详细的 JavaScript 代码实现。

原帖地址：http://space.flash8.net/space/?uid-18713-action-viewspace-itemid-409746

原作者：我佛山人

代码

// 更平滑的滚动效果

var SmoothScroll = new Class({

     // 继承自Fx.Scroll
    Extends: Fx.Scroll,

     // 构造函数,将覆盖父类Fx.Scroll的构造函数
    initialize: function (options, context)    {
         // 限定所作用的对象
        context = context || document;
         var doc = context.getDocument(), win = context.getWindow();
         // 调用父类Fx.Scroll的构造函数
        arguments.callee.parent(doc, options);
         // 获取所有链接
         this .links = ( this .options.links) ? $$( this .options.links) : $$(doc.links);
         // 获取不包括锚点的当前页地址
         var location = win.location.href.match( / ^[^#]* / )[ 0 ] + ' # ' ;
         // 遍历所有链接,只处理锚点在当前页的锚点链接
         this .links.each( function (link)    {
             // 链接不是当前页的锚点
             if (link.href.indexOf(location) != 0 ) return ;
             // 取锚点(这里直接用link.hash应该更简单)
             var anchor = link.href.substr(location.length);
             // 取到锚点名,然后为当前链接添加事件监听,在单击时将自动滚动到id值为锚点名的对象
             if (anchor && $(anchor)) this .useLink(link, anchor);
        }, this );
         // 对Safari的hack处理
         if ( ! Browser.Engine.webkit419)     this .addEvent( ' onComplete ' , function ()    {
            win.location.hash = this .anchor;
        }, true );
    },

     // 使用当前链接,对当前链接的事件监听处理
    useLink: function (link, anchor)    {
         // 监听链接的单击事件
        link.addEvent( ' click ' , function (event)    {
             // 转为属性,使得在其它方法或事件内可以使用
             this .anchor = anchor;
             // 滑动到id为anchor的对象
             this .toElement(anchor);
             // 阻止事件冒泡及返回值
            event.stop();
        }.bind( this ));
    }
});

转载于:https://www.cnblogs.com/maapaa/articles/mootools-s-46.html