jQuery-锚点动画

jQuery-锚点动画

什么是锚点

锚点是网页制作中超级链接的一种，又叫命名锚记。命名锚记像一个迅速定位器一样是一种页面内的超级链接，运用相当普遍。

锚点的作用

锚点是文档中某行的一个记号,类似于书签,用于链接到文档中的某个位置。当定义了锚点后,我们可以创建直接跳至该锚点(比如页面中某个小节)的链接,这样使用者就无需不停地滚动页面来寻找他们需要的信息了。

下面我们来看一下我自己的github上面的网站 (可以点进去)

锚点的创建

如上图红色框所示 这4个图标都是锚点链接

锚点链接的意思说就是：

“abc”就是一个链接，我点击“abc”之后，就会跳转到"123"的位置上。

最常用的方式，在一个网页的开头，做一个目录，每一个目录都是一个锚点链接，然后链接到本页面相关的位置。

锚点链接的语法

<a name="锚点的名字"></a>

意思是在网页中的某一个位置，插入一个锚点

<a href="#锚点的名字">显示的字样</a>

意思是在网页中的某一个位置链接之前设定的锚点，只要点击该链接，就会自动跳转到锚点处。

href属性的属性值最前面要加 #

干货

咳咳！ 主要不知道讲啥了，直接上干货

1. 给要进行锚点跳转的 <a> 标签加一个类 例： <a href="#haha" class="scroll">
2. 获取对应节点距离浏览器顶部的距离 例 ： let haha = $('#haha').offset().top
3. 给所有要锚点动画的加上点击事件 例：$('.scroll').on('click',function())
4. 其实到这已经完事了，写完整点就是：

$(function(){
    $('.scroll').on('click',function(){//绑定点击事件
        let haha = $('#haha').offset().top;//获取对应元素剧情屏幕顶部的距离
        $('html,body').animate({scrollTop:haha},800);//动画出炉
    });
});

适用于页面所有的动画

还是给要进行锚点跳转的 <a> 标签加一个类 例： <a href="#haha" class="scroll">

代码如下：

$(function(){
    $('.scroll').on('click',function(){//绑定点击事件
        let tops = $(this).attr('href');//获取对象
        $('html,body').animate({scrollTop:tops.offset().top},800);//动画出炉
    })
})

简化：

$(function(){
    $('.scroll').on('click',function(){
        $('html,body').animate({scrollTop:$(this).attr('href').offset().top},800);
    })
})