html锚点链接回到顶部,回到顶部和回到底部特效-jquery锚点移动兼容所有浏览器...
插件描述:回到顶部和回到底部特效-jquery锚点移动兼容所有浏览器
回到顶部和回到底部在当前的网页中应用时相当广泛的
为了更好的体验,我们在回到顶部或回到底部的过程中采用一个渐进的滚动
那么我们就要用到强大的 Jquery 了。具体步骤如下:
1、在压面 body 中的任何地方加入一下代码
回到顶部
回到底部
在head中加入css#scroll {position:fixed; top:300px; right:100px;}
.scrollItem {width:20px; height:70px;border:#e1e1e1 1px solid; cursor: pointer; text-align: center; padding-top: 10px;}
当然你也可以定义自己的外观,可以放上一张图片来替代,关键的是保持id与js代码中一致,而且要将滚动导航层的position设置为fixed,这样当我们拖动滚动条的时候,滚动导航层才不会动。
2、引入jqeury库文件
在以上的JS代码中,我们可以自定义滚动速度,speed值越大,滚动越快
var speed = 1000;
那么你的页面便实现了回到顶部和底部的功能。
在此我还要多添加一个功能,那就是滑动到指定ID的元素,语法如下。需要把scrollTop设置为
$(‘#ID’).offset().top
如果你是一名站长,你可以将上面的代码放到底部模板(一般是footer.php)中,那么你的网站的所有页面都具备了这样的功能。
下载链接(包含JS文件和demo)
html锚点链接回到顶部,回到顶部和回到底部特效-jquery锚点移动兼容所有浏览器...相关推荐
- dw cs6 html建站点,dreamweaver cs6网页中制作锚点链接的教程方法
部分网友刚刚下载使用dreamweaver cs6的朋友们,可能还不是很熟悉其中制作锚点链接?下面这篇内容就为你们带来了dreamweaver cs6网页中制作锚点链接的教程方法. dreamweav ...
- html 锚文本,什么是锚文本,锚文本链接对SEO的影响!
SEO是一个细节决定成败的工作,如果你想要试图改善排名,每一名SEO人员在做优化的时候,都绕不开锚文本这个话题,如果你选择正确的锚文本,它会使你事半功倍,反之则是事倍功半. 那么,什么是锚文本,锚文本 ...
- 9、HTML锚点链接(回到顶部)
锚点链接是超链接中的一种.锚点的妙处之一在于,你可以使用它链接到文档中的某个特定位置.例如,有些网页内容较多,页面过长,用户需要不停的使用浏览器上的滚动条来查看文档中的内容.这时为了增强用户体验,可以 ...
- 锚点定位 跳转到指定位置 回到顶部功能
一.跳转到指定位置 项目中数据较多,但是要在一个页面展示出来,就会需要定位功能. 例如淘宝中点击某个商品的分类会跳转到对应的模块,模块中是详细的商品信息 数据 arrayList:[{ //不一一列出 ...
- 包含锚点平滑滚动效果/解决锚点链接碰到固定定位问题/导航选中背景变色/固顶/返回顶部效果全...
<script type="text/javascript">$(function() {//锚点平滑滚动效果 $('a[href*=#],area[href*=#]' ...
- html命名锚记链接失败,命名锚记(设置命名锚记超级链接)
在Dreamweaver中命名锚记的英文是anchor,中文意思为"锚",意指其功能像船的锚一样,能迅速下沉并且定位.(1)将光标移至需要插入锚记的段落标题前,选择"插. ...
- HTML网页制作:制作锚点链接
1.锚点链接定义: 指我点击页面中的某一个链接(锚点链接),就会跳到这个页面的指定位置(锚点). 2.锚点链接的步骤: (1).设置锚点:<a name="锚点的名字"> ...
- HTML中超链接:内部链接、外部链接、空链接、锚点链接的区分
①.内部链接:在自己的网站中,网页之间相互跳转. <a href="a.html" target="_blank">跳转到a.html</a& ...
- web前端学习26(锚点链接)
文章目录 4.7.2 链接分类 4.7.2 链接分类 锚点链接:点我们点击链接,可以快速定位到页面中的某个位置. 在链接文本的href属性中,设置属性值为#名字的形式,如< a href=&qu ...
最新文章
- 新的一年,,,新的生活
- poj 3006 java
- WebView 加载javaScript
- docker mysql sock_docker mysql安装
- 欢迎使用CSDN-markdown编辑器2131
- Sonarqube+maven 分析代码
- springboot 实现接口灰度发布
- 前端:JS/17/前篇总结(JS程序的基本语法,变量),数据类型-变量的类型(数值型,字符型,布尔型,未定义型,空型),数据类型转换,typeof()判断数据类型,从字符串提取整数或浮点数的函数
- ICT学习笔记(1) 网络以及网络模型的相关知识
- C#中的程序集和命名空间
- [转帖]SQL SERVER 2005 安全设置
- Python数据分析(二):DataFrame基本操作
- AcWing 859. Kruskal算法求最小生成树(稀疏图)
- 12.万无一失:网站的高可用架构
- python编程读取文件内容_python编程从入门到实践:读取整个文件和创建包含文件各行的内容...
- DOS的一个小工具 LOIC
- PHP UTF-8转GBK
- zemax中如何和matlab中通信,如何在ZEMAX及MATLAB之间通信.doc
- oracle误删除数据恢复
- grpc报错rpc error:code=DeadlineExceeded desc = context deadline exceeded
热门文章
- Android平台移动GIS类地图软件
- 如何培养真正的数据分析思维?附实践案例
- python应用如何实现升级_一种基于Python实现BMC批量升级的方法与流程
- java调用iec61850_通过iec61850协议访问设备数据的一个例子
- ie 10中flash动画只有声音没有画面解决办法
- 【电赛-软件】CCS安装教程
- 中国大学MOOC大学生安全文化考试试题(含答案)
- 【Consul教程】2.SpringBoot整合Consul搭建服务注册与发现
- 废品机械师双脚机器人教程_《废品机械师》自动寻物机器人图文教程
- 基于嵌入式平台下的GIS/GPS定位系统设计 之 设计方案选择