锚点动画的实现以及其他相关

前言

       在单页面中导航大多数都是直接使用锚点来进行导航，因为使用起来比较方便，但是单纯的锚点导航没有动画看起来比较生硬，所以基本上涉及到单页面导航都会给锚点跳转加上动画，那么实现起来也十分的简单方便。通过现在这么多的练习与学习，我发现很多功能如果每次都要自己写的话会比较麻烦，是否可以像各种框架一样封装起来成为自己的一个框架，每次只要通过特定的方法来调用就好了，那么这次我就将这个锚点动画的功能封装在我自己的一个js当中。同时这次涉及到锚点，又使我想起了前一段时间接触到的js中的hash，总感觉二者很像，再来探讨一下二者之间的关系。

实现锚点动画

代码：

(function anchor_animate() {
        // 可传递上下偏移量
        var $offsetY = parseInt(-$(".my.anchor-animate").data('moffset')) || 0;
        // 可传递动画时间
        var $time = parseInt($(".my.anchor-animate").data('mtime')) || 500;
        $(".my.anchor-animate a").click(function () {
            $('html,body').animate({
                // 拿到锚点对应所在对象并给其设置动画
                scrollTop: ($($(this).attr('href')).offset().top + $offsetY)
            }, $time);
        });
    })();

通过这些简单的代码就可以实现锚点动画了，值得注意的是这是我已经封装好的锚点动画，如果想要调用只需要给想要实现锚点动画的导航栏加上.my 、 .anchor-animate 这两个类就可以了，还可以通过data来设置参数，下次想要使用的时候就很方便了，以后把更多的功能封装进来。

关于hash

起初我在学习一些知识的时候有使用过hash，不过当时是使用在实现给不同页面加上hash值，然后实现页面刷新在固定页面的功能上，因为hash也是在地址栏中加上#的原因，所以我觉得这和锚点很像，然后我去查了一下，其实hash的定义就是：hash 属性是一个可读可写的字符串，该字符串是 URL 的锚部分（从 # 号开始的部分）。其实就是一家人，再记录一下hash的用法：location.hash=anchorname当设置之后当前页面的url地址栏中就会出现#anchorname了。

总结

以后尽可能的将一些常用的功能都封装到自己的js之中，然后向一些框架学习，学习他们是如何封装的，让自己的js也更加的规范。