您的位置：首页 > Web前端 > JQuery

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

2015-04-25 16:26 711 查看

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;

});

复制代码

英文原文： stackoverflow.com

via：http://ourjs.com/detail/55374fc065d4672d0f000009

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航