前端技巧--利用jquery 实现单页定位动画运动（滑动到某个板块触发动画）

首先引入jquery

 

第二步在样式中设置锚点 和锚链的id

<p id = "title1"></p>
<br><br><br><br><br><br><br>
<div id = "modOne"></div>

第三步  直接上代码：

<script>
    jQuery(document).ready(function($) {
                /*回到顶部*/
                $('#gotop').click(function() { //回到顶部所在元素的 id为gotop  这里创建他的点击事件
                    $('body,html').animate({
                            scrollTop: 0； //这个是body html 距离顶部的距离  最顶端和窗口中可见内容的最顶端之间的距离
                        },
                        800); //点击回到顶部按钮，缓动回到顶部,数字越小越快
                    return false;
                });
                /*模块一*/
                $('#title1').click(function() {
                    $("html,body").animate({
                        scrollTop: $("#modOne").offset().top
                    }, 1000);
                });
            }
</script>