欢迎访问淘淘IT!QQ:505342486

jQuery锚点缓慢移动到目标位置

时间:2020-06-29 11:24:51    来源:网络    浏览:19

代码如下:

<!DOCTYPE html>
<html>
<head>
	<title>锚点缓慢移动</title>
</head>
<script type="text/javascript" src="http://cdn.staticfile.org/jquery/2.1.1-rc2/jquery.min.js"></script>
<style type="text/css">
	nav span {padding: 10px;margin-right: 4px;}
	.box {height: 400px;width: 100%;background: #e2e2e2;margin-bottom: 30px;}
</style>
<body>
	<nav>
		<span>介绍</span>
		<span>案例</span>
		<span id="team_a">团队</span>
		<span>联系</span>
	</nav>
	<div class="box">这是介绍</div>
	<div class="box">这是案例</div>
	<div class="team box">这是团队</div>
	<div class="box">这是联系</div>

	<script type="text/javascript">
		$('#team_a').click(function(){
	    $('html,body').animate({
	      scrollTop:$('.team').offset().top
	    }, 800);}); 
	</script>
</body>
</html>

如果需要调整跳转的位置,可以$('.team').offset().top加减高度。

比如,顶部有悬浮导航,会遮住一部分页面,可以设置锚点距离顶部超过悬浮导航的高度,代码如下:

$('#team_a').click(function(){
	    $('html,body').animate({
	      scrollTop:$('.team').offset().top - 150
	    }, 800);}); 


来源网址:https://blog.csdn.net/qq_32289849/article/details/90765016

有帮助
(0)
0%
没帮助
(0)
0%
标签: jQuery  animate  锚点  scrollTop  

网友评论

网友评论文明上网理性发言
昵称:

全部评论0条)

o(╯□╰)o 暂无评论,我要抢沙发。
栏目列表
点击排行
more