博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
html锚点 点击跳转到页面指定位置
阅读量:5236 次
发布时间:2019-06-14

本文共 1075 字,大约阅读时间需要 3 分钟。

本来是在看阮大神写的ajax教程,突然发现点击目录文字会跳转到相对应的文本内容,于是乎激发了我的兴趣。

这个究竟怎么做的,刚开始看的时候一知半解,找度娘就是:“点击跳转到页面指定位置”,找了下,原来专业术语叫:锚点。

度娘真是个博大精深的地方,有着多种的方法可以使用。

最简单的一种:

设置a标签的锚点就行啦,但是有个确定链接会更改,不利于刷新

第二种方法是根据animate的方法来移动

animate(params, [duration], [easing], [callback])

创建自定义动画,注意:所有指定的属性必须用骆驼形式,比如用marginLeft代替margin-left.

例子:

// 在一个动画中同时应用三种类型的效果$("#go").click(function(){  $("#block").animate({     width: "90%",    height: "100%",     fontSize: "10em", //驼峰    borderWidth: 10  }, 1000 );});

将上面的html中的a标签去掉#toc0

js代码

$(".aaa").click(function () {    $('html,body').animate({        scrollTop:$(".aaa1").offset().top},{duration:500,easing:'swing'});    return false;})

以上总结的两种是常用且兼容比较好的,较为简单的

也可参考复杂的案例

http://www.jb51.net/article/96574.htm

http://bbs.csdn.net/topics/390960199?page=1

 

转载于:https://www.cnblogs.com/web1/p/7039640.html

你可能感兴趣的文章
spring的annotation
查看>>
go 学习笔记(4) ---项目结构
查看>>
如何解决ORA-01033问题(转)
查看>>
分割线细线
查看>>
java 中的一些运算符问题
查看>>
c# 操作ftp
查看>>
css切换--使用cookie
查看>>
C#运算符之异或运算
查看>>
C语言与C++ <string.h> memchr出现的问题
查看>>
java中静态代码块的用法 static用法详解
查看>>
用于代码检查的错误列表
查看>>
Java线程面试题
查看>>
C#2.0 读word的多个表格到DataGridView或是其它控件 XP Vista
查看>>
sql script: Graphs, Trees, Hierarchies and Recursive Queries
查看>>
Paper Reading: Relation Networks for Object Detection
查看>>
Android中点中overlay弹出带尾巴的气泡的实现
查看>>
Mybatis接口中传递多个参数
查看>>
Dreamweaver层使用八定律
查看>>
Java IO流学习总结
查看>>
day22 01 初识面向对象----简单的人狗大战小游戏
查看>>