给力星

Web Developer

为WordPress的继续阅读增加动画效果

若 WordPress 的文章里添加了 more 标签,则在列表页中会生成一个 “继续阅读” 的链接。“继续阅读”的链接为 post-link#more-id,就是一个锚点链接,因此点击后进入的内容页面会跳到内容的后续部分。

但这样的跳转略显突兀,如果能加一点滚动的动画效果就好多了。这个是可以做到的:判断链接后面是否带了 #more,有则使用 jQuery.animate() 来增加一个滚动效果。

如果链接后有 #more,则 window.location.hash 属性会为 “#more” ,因此实现该效果的代码如下:

if(location.hash.length > 1) {
    $('html,body').animate({scrollTop: $(location.hash).offset().top}, "slow", "swing");
}

stackoverflow 上的问题 jQuery scrollTop if URL has hash 提供了更好的解决方案,使用了 $.fn.extend,可以为页面上的锚点跳转链接都提供一个滚动效果:

$.fn.extend({
    scrollWindow: function(options) {
        var defaults = { duration: "slow", easing : "swing" }                 
        var options =  $.extend(defaults, options);
        var goToHash = function(target){
            $('html,body').animate({scrollTop: $(target).offset().top}, options.duration, options.easing, function() {
                location.hash = target;
            });
        };
        if(location.hash.length > 1) goToHash(location.hash);
        return this.each(function() {             
            $(this).click(function(e) {
                //Remove junk before the hash if the hash exists:
                var target = $(this).attr('href').replace('^([^#]+)#','#');
                goToHash(target);
                e.preventDefault();
            });

        });
    }
});

/* 使用:给对象绑定该方法 */
$('#toc a').scrollWindow();

很适合用在页面目录中的锚点链接上。

参考资料

1条评论

发表评论

电子邮件地址不会被公开。