单个网页内锚链接的跳转

经常遇到要在一个页面内跳转的需求。

估计用的最多的方法就是

<a href="#myId">跳转</a>

<div id="myId">目标</div>

 这种跳转很方便，但是在四处都讲用户体验的今天，还是有些可以改进的地方。

如何改进呢。就用到jquery。让其有个移动的效果，从“跳转” 缓缓的滚动到“目标”。

如何实现呢。

技术点：animate，和scrollTop，和offset().top

animate:负责动画效果。

scrollTop():滚动条到顶部的距离。

offset().top : 目标div “#myID”到页面顶部的偏移量。

 

一个粗糙的示例：

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>单页内滚动</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
	$(function(){
		$("a").click(function(){
			//$("body").animate({scrollTop: '300px'}, 1000); //让body滚动条移动300px。
            var myh=$("#mubiao").offset().top;
           console.log(myh);
            $("body").animate({scrollTop:myh+'px'},1000);
		})
	})
</script>
</head>
<body>
	<a href="#mu1biao">跳转到目标</a>
    <p>1</p>
    <p>13</p>
    <p>14</p>
    <p>12</p>
    <p>14</p>
    <p>16</p>
    <p>178</p>
    <p>18</p>
     <p>1</p>
    <p>13</p>
    <p>14</p>
    <p>12</p>
    <p>14</p>
    <p>16</p>
    <p>178</p>
    <p>18</p>
     <p>1</p>
    <p>13</p>
    <p>14</p>
    <p>12</p>
    <p>14</p>
    <p>16</p>
    <p>178</p>
    <p>18</p>
     <p>1</p>
    <p>13</p>
    <p>14</p>
    <p>12</p>
    <p>14</p>
    <p>16</p>
    <p>178</p>
    <p>18</p>
     <p>1</p>
    <p>13</p>
    <p>14</p>
    <p>12</p>
    <p>14</p>
    <p>16</p>
    <p>178</p>
    <p>18</p>
     <p>1</p>
    <p>13</p>
    <p>14</p>
    <p>12</p>
    <p>14</p>
    <p>16</p>
    <p>178</p>
    <p>18</p>
     <p id="mubiao">#mubaio</p>
    <p>13</p>
    <p>14</p>
    <p>12</p>
    <p>14</p>
    <p>16</p>
    <p>178</p>
    <p>18</p>
     <p>1</p>
    <p>13</p>
    <p>14</p>
    <p>12</p>
    <p>14</p>
    <p>16</p>
    <p>178</p>
    <p>18</p>
     <p>1</p>
    <p>13</p>
    <p>14</p>
    <p>12</p>
    <p>14</p>
    <p>16</p>
    <p>178</p>
    <p>18</p>
     <p>1</p>
    <p>13</p>
    <p>14</p>
    <p>12</p>
    <p>14</p>
    <p>16</p>
    <p>178</p>
    <p>18</p>

     <p>1</p>
    <p>13</p>
    <p>14</p>
    <p>12</p>
    <p>14</p>
    <p>16</p>
    <p>178</p>
    <p>18</p>
     <p>1</p>
    <p>13</p>
    <p>14</p>
    <p>12</p>
    <p>14</p>
    <p>16</p>
    <p>178</p>
    <p>18</p>

</body>
</html>

　　

posted on 2014-03-26 16:39  什么嘉  阅读(278)  评论(0)    收藏  举报

导航