用jQuery为跳转链接锚点添加平滑滚动动画效果(如回到顶部按钮)


发布者 ourjs  发布时间 1429688256585
关键字 JS学习  提问 
Only Bolivian Here: 问

我的网页里面有几个链接。单击后可以跳转到相应的内容以帮助用户阅读。

有没有一种方法,使滚动效果更顺畅一点?

比如实现这样的效果:http://www.position-relative.net/creation/anchor/

但是他用了一个自定义的JavaScript库。jQuery能否提供类似这样的效果?


Joseph Silber 答: fiddle 所显示的效果: http://jsfiddle.net/9SDLw/

$('a').click(function(){
    $('html, body').animate({
        scrollTop: $( $.attr(this, 'href') ).offset().top
    }, 500);
    return false;
});

如果你的元素没有ID,你想用名字来做定位链接,可以使用这个:

$('a').click(function(){
    $('html, body').animate({
        scrollTop: $('[name="' + $.attr(this, 'href').substr(1) + '"]').offset().top
    }, 500);
    return false;
});


为了增强性能,你应该将 $('html, body') 选择器缓存起来。这样每次点击时就不需要再重新查找了

var $root = $('html, body');
$('a').click(function() {
    $root.animate({
        scrollTop: $( $.attr(this, 'href') ).offset().top
    }, 500);
    return false;
});

如果你想更新当前页面的URL。在回调里稍微改一下就可以了:

var $root = $('html, body');
$('a').click(function() {
    var href = $.attr(this, 'href');
    $root.animate({
        scrollTop: $(href).offset().top
    }, 500, function () {
        window.location.hash = href;
    });
    return false;
});




回复 (2)
  • #
  • #1 glen 1429782536218

    列表页咋不加个这样的功能,拉的老长

  • #2 龚专刀 1439200142572

    *

    `

    1. [

    `

    **

    ![

      1.


    ![



    ]1



    ]1


    **

    `

    ]1

    `

    *

微信扫码 立即评论