jQuery-锚点动画
什么是锚点
锚点是网页制作中超级链接的一种,又叫命名锚记。命名锚记像一个迅速定位器一样是一种页面内的超级链接,运用相当普遍。
锚点的作用
锚点是文档中某行的一个记号,类似于书签,用于链接到文档中的某个位置。当定义了锚点后,我们可以创建直接跳至该锚点(比如页面中某个小节)的链接,这样使用者就无需不停地滚动页面来寻找他们需要的信息了。
下面我们来看一下我自己的github上面的网站 (可以点进去)
锚点的创建
如上图红色框所示 这4个图标都是锚点链接
锚点链接的意思说就是:
“abc”就是一个链接,我点击“abc”之后,就会跳转到"123"的位置上。
最常用的方式,在一个网页的开头,做一个目录,每一个目录都是一个锚点链接,然后链接到本页面相关的位置。
锚点链接的语法
<a name="锚点的名字"></a>
意思是在网页中的某一个位置,插入一个锚点
<a href="#锚点的名字">显示的字样</a>
意思是在网页中的某一个位置链接之前设定的锚点,只要点击该链接,就会自动跳转到锚点处。
href
属性的属性值最前面要加#
干货
咳咳! 主要不知道讲啥了,直接上干货
- 给要进行锚点跳转的
<a>
标签加一个类 例:<a href="#haha" class="scroll">
- 获取对应节点距离浏览器顶部的距离 例 :
let haha = $('#haha').offset().top
- 给所有要锚点动画的加上点击事件 例:
$('.scroll').on('click',function())
- 其实到这已经完事了,写完整点就是:
$(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);
})
})