html页面内锚点定位及跳转方法总结
1.最简单的方法是锚点用<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会发生变化，如果刷新可能会出现问题。
2.在js事件中通过window.location.hash="divId"跳转，但地址也会发生变化，感觉跟第一种方法没区别，甚至更麻烦。
3.用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事件，不需要重新绑定。
缺点是：如果页面复杂的话，偏移值可能会发生变化需要算法辅助。
4.js的srollIntoView方法，直接用:
document.getElementById("divId").scrollIntoView();
这种方法的好处，是URL不会变，同时能够响应相应的scroll事件，不需要算法什么的。
推荐用第四种，用react框架的不能改变锚点。
html页面内锚点定位及跳转方法总结的更多相关文章
- html 页面内锚点定位及跳转方法总结
第一种方法,也是最简单的方法是锚点用<a>标签,在href属性中写入DIV的id.如下: <!DOCTYPE html><html><head> < ...
- jQuery实现页面内锚点平滑跳转
平时我们做导航滚动到内容都是通过锚点来做,刷的一下就直接跳到内容了,没有一丝的滚动效果,而且 url 链接最后会有“小尾巴”,就像#keleyi,今天我就介绍一款 jquery 做的滚动的特效,既可以 ...
- linux服务器用nginx做网站内页之间301的跳转方法
例: 要将这个页面 /topic/show-228-1.html 做301跳转到 /dance/topic-show-228-1.html nginx的伪静态规则就这样写: rewrite ^/top ...
- vue中，实现锚点定位及跳转（url不发生变化）
<div class="footer" @click="returnTop"> methods:{ returnTop:function(){ do ...
- Android 实现锚点定位
相信做前端的都做过页面锚点定位的功能,通过<a href="#head"> 去设置页面内锚点定位跳转. 本篇文章就使用tablayout.scrollview来实现an ...
- 如何保证WebBrowser一直在页面内跳转
目前在编写一个小工具,用到了WebBrowser,在调试时点击页面内连接自动打开ie跳转,所以百度查找解决办法. private void webBrowser1_NewWindow(object s ...
- html锚点定位不准确问题
问题描述 当顶部固定时,点击锚点,会跳转到锚点以下. <style> #one,#two,#three{ height: 500px; } #top{ position: fixed; h ...
- jquery 在页面上根据ID定位（jQuery锚点跳转及相关操作） 经典
1.锚点跳转简介 Edit 锚点其实就是可以让页面定位到某个位置上的点.在高度较高的页面中经常见到.比如百度的百科页面,wiki中的page内容. 我知道实现锚点的跳转有两种形式,一种是a标签+nam ...
- jquery 在页面上根据ID定位（jQuery锚点跳转及相关操作）
JQuery下锚点的平滑跳转 对于锚点的平滑跳转,在一般的商业性质的网站上,权衡来说,要谨慎使用. 例如:让页面平滑滚动到一个id为box的元素处,则JQuery代码只要一句话,关键位置 如下: $( ...
随机推荐
- Python数据结构--双向链表
''' 双向链表包含第一个和最后一个的链接元素. 每个链接都有一个数据字段和两个称为next和prev的链接字段. 每个链接都使用其下一个链接与其下一个链接链接. 每个链接都使用其上一个链接与之前的链 ...
- BeautifulSoup4系列一
前言 以博客园为例,爬取我的博客上首页的发布时间.标题.摘要,本篇先小试牛刀,先了解下它的强大之处,后面讲beautifulsoup4的详细功能. 一.安装 1.打开cmd用pip在线安装beauti ...
- POJ 1509 循环同构的最小表示法
题目大意: 给定一个字符串,可以把一段尾部接到头部,这样找到一个最小的字符串 方案一: 利用循环同构中找最小表示的方法来解决 论文参考http://wenku.baidu.com/view/438ca ...
- jvm参数设置 -vmargs -Xms128M -Xmx512M -XX:PermSize=64M -XX:MaxPermSize=128M
-vmargs -Xms128M -Xmx512M -XX:PermSize=64M -XX:MaxPermSize=128M 这里有几个问题: 1. 各个参数的含义什么? 2. 为什么有的机器我将- ...
- SQL Prompt 5.1使用
SQL Prompt 5.1教程 1.下载 自行下载安装文件.本人是从http://www.cr173.com/下载的. 2.安装 安装没什么特别的,不用说了 3.注意一下破解和配置 按里面的read ...
- BZOJ1573: [Usaco2009 Open]牛绣花cowemb
求半径d<=50000的圆(不含边界)内n<=50000条直线有多少交点,给直线的解析式. 一开始就想,如果能求出直线交点与原点距离<d的条件,那么从中不重复地筛选即可.然而两个kx ...
- 用DW制作简单的浮动广告
原文发布时间为:2008-11-08 -- 来源于本人的百度文章 [由搬家工具导入] 浮动广告可以用层和时间轴结合做出，先选择你的dreamweaver“窗口”，然后从“窗口”菜单中选择“时间轴”，时 ...
- Flex嵌入HTML页面
这段时间一直在苦心研究Flex,今天突然想,我们平时都是把swf放到网页中,怎么才能把网页嵌入到Flex中呢?我查了一些资料,然后经过自己的不懈努力,终于搞定. 为了方便,写了个嵌入HTML页面的代理 ...
- P1427 小鱼的数字游戏 洛谷
https://www.luogu.org/problem/show?pid=1427 题目描述 小鱼最近被要求参加一个数字游戏,要求它把看到的一串数字(长度不一定,以0结束,最多不超过100个,数字 ...
- 洛谷——P2068 统计和
P2068 统计和 题目描述 给定一个长度为n(n<=100000),初始值都为0的序列,x(x<=10000)次的修改某些位置上的数字,每次加上一个数,然后提出y (y<=1000 ...