准备
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]
加群入久伴博客官方微信群
加入久伴官方微信群有啥优势？
1.文章内部资源由于时间久远可能失效，加群,群内可以第一时间反馈
2.网站中教程不一定适用任何人，加群可以第一时间咨询并解决您得疑惑
3.你游荡于互联网，也需要群体，加群一起互动交流，畅所欲言
扫描下方二维码即可加入交流讨论
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
