jquery实现html超链接锚点之间的平滑效果

html页面多处使用到超链接标签的锚点功能时,那样的效果感觉太生硬了,点击超链接,马上就跳转到目地地,给人一种不好的感觉,使用jquery来实现这一功能,给人的体验效果会好很多。具体代码是这样实现的,只要你网页上用到了锚点功能,将该代码直接贴上就可以使用。

$('a[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
					},700);
					return false;
				}
			}
		});

锚点使用:

<a href="#item6">技术服务</a><a href="#item7">人才培训</a>


<div><a name="item6"></a> 跳转到这里A </div>
<div><a name="item7"></a> 跳转到这里B </div>

 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值