html增加锚点,html增加锚点定位

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

div {

height: 800px;

width: 400px;

border: 2px solid black;

}

h2 {

position: fixed;

margin:50px 500px;

}

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事件，不需要算法什么的。

推介大家用第四种，我依次试了前三种，都有各种问题。

html中设置锚点定位的几种常见方法(#号定位)

在html中设置锚点定位我知道的有几种方法,在此和大家分享一下: 1.使用id定位: 锚点1

【TRICK】解决锚点定位向下浮动Xpx问题

1. 问题描述 页面滚动后,菜单栏会固定在页头,当锚点定位时,菜单会遮盖部分定位后的内容,所以需要在锚点定位后自动向下漂移Xpx. 2. 解决办法 a. 利用空div 占位,如下:

当锚点定位遇上position: fixed

当锚点定位遇上position: fixed &lt ...

Android tabLayout+recyclerView实现锚点定位

原文链接:https://mp.weixin.qq.com/s/L3o2i3WTmg1ScXEYDS8YCg 在上一篇文章 Android 实现锚点定位中,我们介绍了tablayout+scrollV ...

Android 实现锚点定位

相信做前端的都做过页面锚点定位的功能,通过 去设置页面内锚点定位跳转. 本篇文章就使用tablayout.scrollview来实现an ...

锚点定位，jquery定位到页面指定位置

jquery锚点定位 $('body,html').animate({scrollTop: $('#ter1').offset().top}, 500);#ter1是你要定位的id对象,500是0.5 ...

js实现锚点定位

js实现锚点定位的原理是,算出定位的标签距离顶部的高度,点击触发标签,重新赋值滚动条的高度到达指定位置.

...

html锚点定位不准确问题

问题描述 当顶部固定时,点击锚点,会跳转到锚点以下.

微信小程序基于scroll-view实现锚点定位

代码地址如下:http://www.demodashi.com/demo/14009.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...

随机推荐

IAP内购

IAPHelper.h // // IAPHelper.h // airplay // // Created by apple on 13-10-23. // Copyright (c) 2013年 ...

Java synchronized 总结

在Java开发的时候经常会用到关键字synchronized来对代码进行同步,在使用的过程中,对于synchronized确不是很熟悉,最近在看Spring源码时,发现有不少地方都用到同步,因此,趁此 ...

eclipse优化配置

-startup plugins/org.eclipse.equinox.launcher_1..jar --launcher.library plugins/org.eclipse.equinox. ...

BZOJ 1572: [Usaco2009 Open]工作安排Job( 贪心 )

贪心... 按截止时间排序 , 然后从小到大考虑 . 假设当前考虑第 i 个任务 , 若目前已选工作数 < D_i , 那就选 i ; 否则 若已选工作中利润最小的比 P_i 小 , 那就去除它 ...

Xcode插件推荐

deriveddata-exterminator: A magic button in Xcode to exterminate the current project's DerivedData d ...

Gluon炼丹(Kaggle 120种狗分类，迁移学习加双模型融合)

这是在kaggle上的一个练习比赛,使用的是ImageNet数据集的子集. 注意,mxnet版本要高于0.12.1b2017112. 下载数据集. train.zip test.zip labels ...

Linux内核实验作业七

实验作业:Linux内核如何装载和启动一个可执行程序 20135313吴子怡.北京电子科技学院 [第一部分]理解编译链接的过程和ELF可执行文件格式 1.编译链接的过程 2.ELF可执行文件格式 一个 ...

《Mysql必知必会》笔记

两年前买的书,因为种种原因一直没看,零碎抽点时间看一遍,感觉对自己有用的就顺手记录下.之后转身就把这本书甩了,因为这本书的内容大多是增删改查语句,不实操只看的话,没有什么意义.而且作为一个测试,其实在 ...

Thunder团队第一周 - Scrum会议7

Scrum会议7 小组名称:Thunder 项目名称:爱阅app Scrum Master:宋雨 工作照片: 参会成员: 王航:http://www.cnblogs.com/wangh013/ 李传康 ...

2018年总结和2019年的Flag

---恢复内容开始--- 目前截止到现在工作将近一年半了,今天工作上主要后端主要是用了两种语言,java和Python(2.7),今年完成主要的工作主要使用Python在写一些脚本来满足财务和人资部门 ...