准备
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.你游荡于互联网,也需要群体,加群一起互动交流,畅所欲言
扫描下方二维码即可加入交流讨论
