html锚点定位原理,html 页面内锚点定位及跳转方法总结

第一种方法，也是最简单的方法是锚点用标签，在href属性中写入DIV的id。如下：

to div1

to div2

to div3

div1

div2

div3

这种方法的缺点是点击锚点之后，浏览器的URL会发生变化，如果刷新可能会出现问题。

第二种方法是在js事件中通过window.location.hash="divId"跳转，但地址也会发生变化，感觉跟第一种方法没区别，甚至更麻烦。

第三种方法是用animate属性，当点击锚点后，页面滚动到相应的DIV。接着上面的代码，具体添加如下代码：

$(document).ready(function() {

$("#div1Link").click(function() {

$("html, body").animate({

scrollTop: $("#div1").offset().top }, {duration: 500,easing: "swing"});

return false;

});

$("#div2Link").click(function() {

$("html, body").animate({

scrollTop: $("#div2").offset().top }, {duration: 500,easing: "swing"});

return false;

});

$("#div3Link").click(function() {

$("html, body").animate({

scrollTop: $("#div3").offset().top }, {duration: 500,easing: "swing"});

return false;

});

注意：运行上面的脚本的之前，先将为锚点增加相应的id，同时去掉href属性。

$("html, body")可以替换为响应的div，如果不起作用，试着给该div增加overflow：scroll属性。

另外，脚本可以进一步优化，自己来试试

这样做的好处是：URL地址不会变，同时点击锚点时会自动响应scroll事件，不需要重新绑定。

缺点是：如果页面复杂的话，偏移值可能会发生变化需要算法辅助。

第四种方法是用js的srollIntoView方法，直接用:

document.getElementById("divId").scrollIntoView();

这种方法的好处，是URL不会变，同时能够响应相应的scroll事件，不需要算法什么的。

我最近写angular界面，使用了弹框，想要弹框中输入的内容有错误时。跳转到相应的位置，以上3种方法都无法是实现。只有这个可以

html锚点定位原理,html 页面内锚点定位及跳转方法总结相关推荐

页面内锚点定位及其跳转
一.前言这篇文章我们来看一个网页中常用的小功能--锚点定位及其跳转.简单理解,这个功能就是点击"目录"中相应的"标题",对应"滚动跳转"到 ...
JS 页面内锚点跳转
JS 实现页面内锚点跳转 //平滑的跳转 let element = document.getElementById("id"); if (element) {element.sc ...
【定位原理揭秘第三期】室内定位技术原理揭秘
> > > >引言地图软件已经成为我们日常出行必不可少的工具之一,在导航和搜索上带来了很多便捷的帮助.而定位技术在地图软件里的应用可谓无法替代,尤其是在小范围的室内定位环境下 ...
【定位原理揭秘第二期】GPS定位实现原理解析
什么是GPS定位? 我们手机上的GPS定位,是卫星定位的一种约定俗成的说法,卫星定位的全称来说应该叫做GNSS(Global Navigation Satellite System)定位.GPS只是G ...
html 页面内锚点定位及跳转方法总结
第一种方法,也是最简单的方法是锚点用<a>标签,在href属性中写入DIV的id.如下: <!DOCTYPE html> <html> <head> & ...
java wifi定位原理_基于wifi的室内定位方法深度分析.doc
大连理工大学本科毕业设计(论文) 基于WiFi信号的室内定位方法 Indoor localization method based on the WiFi signal 学院(系): 软件学院专 ...
病毒特征码定位原理和首次使用MyCCL
一什么是病毒特征码特征码就是从病毒体内不同位置提取的一系列字节,杀毒软件就是通过这些字节及位置信息来检验某个文件是否病毒.每个杀毒软件公司都有自己的特征码提取方法和提取工具,这也是特别需要技术的地 ...
h5 跳转上个页面刷新_H5实现页面内跳转页面
W3School.com.cn 注释:由于链接的目标匹配 iframe 的名称,所以链接会在 iframe 中打开. 原文来源:http://www.w3school.com.cn JS实现页面内跳转 ...
php分页命名锚记怎么用,网页中的锚点(命名锚记)的使用介绍
1.锚点是网页制作中超级链接的一种,又叫命名锚记.命名锚记像一个迅速定位器一样是一种页面内的超级链接,运用相当普遍. 英文名:anchor 使用命名锚记可以在文档中设置标记,这些标记通常放在文档的特定 ...

html锚点定位原理,html 页面内锚点定位及跳转方法总结

html锚点定位原理,html 页面内锚点定位及跳转方法总结相关推荐

最新文章

热门文章