我们在开发 WordPress 主题的时候,很多时候前端会用到锚点链接,默认的点击效果是直接跳到指定的位置,效果比较生硬,如果能加些平滑滚动的效果肯定会更舒服点。获取 a 的 href 的锚点连接 target,通过:
targetOffset=$(target).offset().top; 获取该锚点到浏览器顶部的距离,然后给body添加动画
$('html,body').animate({
scrollTop: targetOffset
},
1000);
$('a[href*=#],area[href*=#]').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']');
if ($target.length) {
var targetOffset = $target.offset().top;
$('html,body').animate({
scrollTop: targetOffset
},
1000);
return false;
}
}
});
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务,详询在线客服!