html 页面内锚点定位及跳转方法总结
第一种方法，也是最简单的方法是锚点用<a>标签，在href属性中写入DIV的id。如下：
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 800px;
width: 400px;
border: 2px solid black;
}
h2 {
position: fixed;
margin:50px 500px;
}
</style>
</head>
<body>
<h2>
<a href="#div1">to div1</a>
<a href="#div2">to div2</a>
<a href="#div3">to div3</a>
</h2>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
</body>
</html>
这种方法的缺点是点击锚点之后，浏览器的URL会发生变化，如果刷新可能会出现问题。
第二种方法是在js事件中通过window.location.hash="divId"跳转，但地址也会发生变化，感觉跟第一种方法没区别，甚至更麻烦。
第三种方法是用animate属性，当点击锚点后，页面滚动到相应的DIV。接着上面的代码，具体添加如下代码：
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(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;
});
});
</script>
注意：运行上面的脚本的之前，先将为锚点增加相应的id，同时去掉href属性。
$("html, body")可以替换为响应的div，如果不起作用，试着给该div增加overflow：scroll属性。
另外，脚本可以进一步优化，自己来试试
这样做的好处是：URL地址不会变，同时点击锚点时会自动响应scroll事件，不需要重新绑定。
缺点是：如果页面复杂的话，偏移值可能会发生变化需要算法辅助。
第四种方法是用js的srollIntoView方法，直接用:
document.getElementById("divId").scrollIntoView();
这种方法的好处，是URL不会变，同时能够响应相应的scroll事件，不需要算法什么的。
推介大家用第四种，我依次试了前三种，都有各种问题。
html 页面内锚点定位及跳转方法总结相关推荐
- html锚点定位原理,html 页面内锚点定位及跳转方法总结
第一种方法,也是最简单的方法是锚点用标签,在href属性中写入DIV的id.如下: to div1 to div2 to div3 div1 div2 div3 这种方法的缺点是点击锚点之后,浏览器的 ...
- 页面内锚点定位及其跳转
一.前言 这篇文章我们来看一个网页中常用的小功能--锚点定位及其跳转.简单理解,这个功能就是点击"目录"中相应的"标题",对应"滚动跳转"到 ...
- JS 页面内锚点跳转
JS 实现页面内锚点跳转 //平滑的跳转 let element = document.getElementById("id"); if (element) {element.sc ...
- jq锚点定位平滑跳转和导航跟随页面滚动并定位到相应位置，导航高亮显示
在做项目的过程中碰到的问题,一开始还很顺利,在编写父子导航时出现了问题,经过研究,终于解决. 关于锚点定位,我们通常都是a标签写上#id名字,然后在目标上写上id名字.然而我采用的不是这种,而且利用自 ...
- vue页面实现锚点定位
html代码: <div @scroll="scrollEvent">/****目录部分***/<ul class="titless"> ...
- 页面中元素居中定位的几种方法
元素居中定位的几种方法 元素居中定位的几种方法 方法一 父元素 子元素 方法二 父元素 子元素 元素居中定位的几种方法 方法一 父元素 position: relative; 子元素 position ...
- Android 实现锚点定位
相信做前端的都做过页面锚点定位的功能,通过<a href="#head"> 去设置页面内锚点定位跳转. 本篇文章就使用tablayout.scrollview来实现an ...
- html增加锚点,html增加锚点定位
第一种方法,也是最简单的方法是锚点用标签,在href属性中写入DIV的id.如下: div { height: 800px; width: 400px; border: 2px solid black ...
- h5 跳转上个页面刷新_H5实现页面内跳转页面
W3School.com.cn 注释:由于链接的目标匹配 iframe 的名称,所以链接会在 iframe 中打开. 原文来源:http://www.w3school.com.cn JS实现页面内跳转 ...
最新文章
- mysql卸载后root还在_TMD终于把MySQL卸载掉了
- ssh 远程登陆异常SSH_EXCHANGE_IDENTIFICATION及解决过程
- 一个简单自激振荡器电路分析
- P2038 无线网络发射器选址
- 如何免费注册Coursera课程
- LeetCode 第 199 场周赛（757/5231，前14.5%）
- Linux看内存标压低压,三代锐龙、国产Linux上身笔记本电脑，性能是否和参数一样好看？...
- Windows安装pytorch-gpu
- nexus下载安装和创建maven私库
- 世界首块10层3D打印PCB电路板问世！
- ARP欺骗，DNS欺骗和图片嗅探——ettercap软件的使用
- Lambda表达详细介绍、全的不能全了!!
- Bad notification for startForeground
- flutter整合极光推送完美版
- PG学习笔记（1）—— 主从复制：流复制
- CentOS 7无法启动，在进度条卡死问题解决
- GCN变体-graphSAGE
- 5.03GEN-B发布！PSP 2000v3/3000最新自制系统
- android 自定义ViewGroup实现仿淘宝的商品详情页
- 多重背包的优化 二进制/单调队列解析