前端屏幕滚动效果

屏幕的滚动我这边给分成两种：

从某个位置直接滚动到最顶端
点击按钮到指定的位置，这个会涉及到锚点

第一种方法最简单，只要利用锚点id定位就可以直接实现了。这种这边就不多做介绍了，主要介绍第二种，会第二种，第一种都是小意思了

介绍第二种先来点代码，大家看的比较清楚：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>滚动</title>
        <style type="text/css">
            .classCont div {
                height: 400px;
                width: 200px;
                border: 1px solid #000000;
            }
            .hrefCont{
                position: fixed;
                top: 50%;
                left: 230px;
            }
            .hrefCont a{
                display: block;
                width: 20px;
                height: 20px;
                margin-bottom: 2px;
                text-align: center;
                line-height: 20px;
                border: 1px groove #000000;
                cursor: pointer;
                text-decoration: none;
            }
        </style>
    </head>

    <body>
        <div class="classCont">
            <div id="class1">1</div>
            <div id="class2">2</div>
            <div id="class3">3</div>
            <div id="class4">4</div>
            <div id="class5">5</div>
        </div>
        <div class="hrefCont">
            <a href="#class1">1</a>
            <a href="#class2">2</a>
            <a href="#class3">3</a>
            <a href="#class4">4</a>
            <a href="#class5">5</a>
        </div>
    </body>
</html>

运行结果界面

运行后大家会发现没动画确实很生硬，一点都不友好。接下来我们来家电动画，在原来的基础上加入js代码：

<script 
    <script type="text/javascript">
        $(document).ready(function() {
            $("a").click(function() {
                $("html, body").animate({
                    scrollTop: $($(this).attr("href")).offset().top + "px"
                }, {
                    duration: 500,
                    easing: "swing"
                });
                return false;
            });
        });
    </script>

点击相应的<a>标签，对html和body标签执行整体动画处理，执行中获取<a>标签href的属性值，这个值也就是锚点的id。

例如：点击右边浮动框 1 的时候，$($(this).attr("href"))等于$("#class1")。再获取 id 为 class1 顶部的偏移量，这个偏移量就是滚动的距离。之后设置一下滚动的时间和滚动的方式。

duration 是滚动的时间
easing 是滚动的方式有时间的朋友可以去看看这个，挺好玩

上面代码看懂的大神请不要嫌弃我啰嗦，具体的效果体验还是要大家自己动手实践了。如有更好方法请开尊口！

帮到你了么？喜欢就点赞吧！^_^