<!--html-->
<div id="top" name="top" style="height:3000px;"></div>
<a href="#top">回顶部</a> <!-- 设置锚链接跳转地方的id -->
复制代码
方法一
$('a').click(function(){
$('html, body').animate({
<!--scrollTop: $( $.attr(this, 'href') ).offset().top-->
scrollTop: $($(this).attr("href")).offset().top
}, 500);
return false;
});
复制代码
延伸
$(document).on('click', 'a', function(event){
event.preventDefault(); // 阻止默认事件发生
$('html, body').animate({
scrollTop: $( $.attr(this, 'href') ).offset().top
}, 500);
});
复制代码
方法二
$('a').click(function(){
$(document).animate({
/* 点击对象的锚链接*/
scrollTop:$(this.hash).offset().top
},500)
return false;
})
复制代码
如果你的目标元素没有ID,也可以用设置name来链接:
$('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,在animate回调中执行即可
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;
});
复制代码