准备
jquery JS html
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>a标签锚点缓慢跳转</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<style>
div {
margin-top: 700px;
}
</style>
</head>
<body>
<a href="#j">不分手的恋爱歌词</a>
<div>
<h3 id="j">不分手的恋爱</h3>
<p>
不知不觉不问 不痛不痒 多少的时光 不确定的某个 夜晚小巷 泪悄悄流淌 街边天气微凉 淡淡月光 我沿路哼唱
找寻我们一直 找不到的 缘分被捆绑 感觉不到你为我坚强 感觉得到你对我说谎 我安静听着肖邦 用维也纳忧伤
你的爱被埋葬恨被收藏 痛应该原谅 我的爱不用讲 恨不用想 思念在发烫 看着你的脸庞 背着行囊 说要去远方
谁还记得那年我拉着你说 爱永远一样 RAP:我也搞不懂为什么那么多真心相爱 到最后 都会变成两个人分开的无奈
当初我们说过要谈一场永远不分手的恋爱 是否今天这句话竟变成我们之间的阻碍 不想太多 不想太多 也许会明白的更多
不想再说 不想再说 就让我们彼此沉默 现在我们终于明白 结局却也无法更改 这场不分手的恋爱我想结局注定失败
不知不觉不问 不痛不痒
</p>
</div>
</body>
<script>
$("a").click(function () {
$("html, body").animate({scrollTop: $($(this).attr("href")).offset().top -20+ "px"}, 1000);
return false;//不要这句会有点卡顿
});
</script>
</html>
演示效果
[link href=http://demo.jiubx.com/a]点我查看演示[/link]
