a标签锚链接缓慢跳转

准备

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]

人已赞赏
JavaScript

倒计时切换网页为灰色或恢复正常网页

2020-4-4 16:17:16

JavaScript

AJAX同步和异步请求有什么不一样

2020-7-6 2:30:38

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索