JQuery简单实现锚点链接的平滑滚动

最新推荐文章于 2023-12-14 15:52:07 发布

智深先生

最新推荐文章于 2023-12-14 15:52:07 发布

阅读量534

点赞数 2

分类专栏： HTML 文章标签： jquery 锚点

本文链接：https://blog.csdn.net/qq_42799116/article/details/87694995

版权

HTML 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一般使用锚点来跳转到页面指定位置的时候，会生硬地立即跳转到指定位置，但是有些时候我们想要平滑地过渡到指定的位置，那么可以使用JQuery简单的实现这个效果：

话不多说，以下是源码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        a{
            text-decoration: none;
        }
        .top a{
            padding: 10px;
            background: blue;
            color: #ffffff;
        }
        
        .main{
            height: 200px;border: 1px solid red;margin-top: 400px
        }
    </style>
</head>
<body>
<!--顶部导航-->
<div class="top">
    <a href="#index">首页</a>
    <a href="#gongneng">功能</a>
    <a href="#test">测试</a>
</div>

<div id="index" class="main">
    <h2>
        <a href="###">首页</a>
    </h2>
</div>

<div id="gongneng" class="main">
    <h2>
        <a href="###">功能</a>
    </h2>
</div>
</body>
</html>

<div id="test" class="main">
    <h2>
        <a href="###">测试</a>
    </h2>
</div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
    $(function(){
        $('a[href*=#],area[href*=#]').click(function() {
            if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
                var $target = $(this.hash);
                $target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']');
                if ($target.length) {
                    var targetOffset = $target.offset().top;
                    $('html,body').animate({
                            scrollTop: targetOffset
                        },
                        1000);
                    return false;
                }
            }
        });
    })
</script>

值得注意的是，在引入jquery文件的时候，jquery2.0左右版本的可以很理想的实现功能，要是要版本如3.0之后的就很难说了。

jquery各个版本下载地址

智深先生

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JQuery简单实现锚点链接的平滑滚动

一般使用锚点来跳转到页面指定位置的时候，会生硬地立即跳转到指定位置，但是有些时候我们想要平滑地过渡到指定的位置，那么可以使用JQuery简单的实现这个效果：话不多说，以下是源码 &lt;!doctype html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; ...
复制链接

扫一扫