jQuery-锚点动画
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);})
})
jQuery-锚点动画相关推荐
- 一款基于jquery ui的动画提交表单
今天要给大家分享一款基于jquery ui的动画提交表单.这款提交表单的的效果是以动画的形式依次列表所需填写的信息.效果非常不错,效果图如下: 在线预览 源码下载 实现的代码. html代码: & ...
- 8款效果精美的 jQuery 加载动画和进度条插件
加载动画和进度条在网站和 Web 应用中的使用非常流行.虽然网速越来越快,但是我们的网站越来越复杂,同时用户对网站的使用体验的要求也越来越高.在内容加载缓慢的时候,使用时尚的加载动画和进度条告诉用户还 ...
- html用jq设置动态效果,jQuery实现基本动画效果的方法详解
本文实例讲述了jQuery实现基本动画效果的方法.分享给大家供大家参考,具体如下: animate()方法用于创建自定义动画 语法: $(selector).animate({params},spee ...
- 玩转Jquery中的动画效果(animate方法)
jQuery 动画 - animate() 方法 jQuery animate() 方法用于创建自定义动画. 语法: $(selector).animate({params},speed,callba ...
- jquery工具箱旋转动画效果
jquery工具箱旋转动画效果 今天给大家分享一个工具箱的旋转动画效果,因为做GIS项目的时候所需要到,这是我在懒人之家看到的一个jquery鼠标点击按钮图标旋转弹出图标菜单旋转动画. 首先,可以引用 ...
- jQuery中的动画理论干货
[jQuery中的动画] 通过jQuery动画能够轻松地为页面添加精彩的视觉效果 [show()方法和hide()方法] 1.show()方法和hide()方法是jQUERY中最基本的动画方法,相当于 ...
- 锋利的JQuery —— 事件和动画
大图猛戳 本文转自博客园xingoo的博客,原文链接:锋利的JQuery -- 事件和动画,如需转载请自行联系原博主.
- java day45【JQuery 高级:动画,遍历,事件绑定,案例,插件】
第一章 JQuery 高级 1. 动画 1. 三种方式显示和隐藏元素 1. 默认显示和隐藏方式 1. show([speed,[easing],[fn]]) 1. 参数: 1. speed:动画的速 ...
- jquery轻量级数字动画插件 —— countUp.js
CountUp.js是一个无依赖,轻量级的JavaScript"类",可用于快速创建以更有趣的方式显示数字数据的动画. 该JS插件下载地址:https://github.com/i ...
- html 萤火虫特效,jquery萤火虫飞舞动画特效插件
这是一款jquery萤火虫飞舞动画特效插件.通过该插件,你可以制作出萤火虫满屏飞舞的效果,你可以指定萤火虫的大小.数量.颜色和透明度等属性. 使用方法 在页面中引入jquery和jquery.fire ...
最新文章
- Matlab数据的可视化 -- 柱形立体图
- 研修项目文件丢失的处理思路
- windowsphone开发_[app开发定制公司]开发app需要什么技术呢?
- 【开发环境】Windows 中安装 Python 各个版本 ( 下载 Python 各版本 SDK | 安装 Python )
- c语言最大公约数和最小公倍数_五年级数学最大公因数最小公倍数 练习
- SpringBoot项目打成jar包后,无法读取resources下的文件
- linux版本查看命令多少位,查看linux系统版本命令32位还是64位
- 开源网站统计程序 oracle,利用百夫长统计程序源码免费搭建独立网站统计软件工具...
- LIVE555建立RTSP服务记录
- Linux系统编程——僵尸的模拟以及僵尸进程的预防
- Python 第十一篇:开发堡垒机
- php语言输出九九乘法表_PHP 输出九九乘法表
- PLSQL中的RECORD小例子
- 华为 oj java题库_华为OJ 201301 JAVA题目0-1级
- 面试之防火墙软硬件架构
- 老瞎眼 pk 小鲜肉-线段树+区间离线
- [ManjaroLinux]-虚拟机安装
- 扫雷小游戏(超详细)
- 兼容低版本IE浏览器的一些技巧分享
- Linux ps命令简介