a标签锚链接缓慢跳转

久伴

645
文章

535
评论

2020年4月8日10:01:07 评论 305 800字阅读2分40秒

准备

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>