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页面内锚点定位及跳转方法总结的更多相关文章

  1. html 页面内锚点定位及跳转方法总结

    第一种方法,也是最简单的方法是锚点用<a>标签,在href属性中写入DIV的id.如下: <!DOCTYPE html><html><head> < ...

  2. jQuery实现页面内锚点平滑跳转

    平时我们做导航滚动到内容都是通过锚点来做,刷的一下就直接跳到内容了,没有一丝的滚动效果,而且 url 链接最后会有“小尾巴”,就像#keleyi,今天我就介绍一款 jquery 做的滚动的特效,既可以 ...

  3. linux服务器用nginx做网站内页之间301的跳转方法

    例: 要将这个页面 /topic/show-228-1.html 做301跳转到 /dance/topic-show-228-1.html nginx的伪静态规则就这样写: rewrite ^/top ...

  4. vue中，实现锚点定位及跳转（url不发生变化）

    <div class="footer" @click="returnTop"> methods:{ returnTop:function(){ do ...

  5. Android 实现锚点定位

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

  6. 如何保证WebBrowser一直在页面内跳转

    目前在编写一个小工具,用到了WebBrowser,在调试时点击页面内连接自动打开ie跳转,所以百度查找解决办法. private void webBrowser1_NewWindow(object s ...

  7. html锚点定位不准确问题

    问题描述 当顶部固定时,点击锚点,会跳转到锚点以下. <style> #one,#two,#three{ height: 500px; } #top{ position: fixed; h ...

  8. jquery 在页面上根据ID定位（jQuery锚点跳转及相关操作） 经典

    1.锚点跳转简介 Edit 锚点其实就是可以让页面定位到某个位置上的点.在高度较高的页面中经常见到.比如百度的百科页面,wiki中的page内容. 我知道实现锚点的跳转有两种形式,一种是a标签+nam ...

  9. jquery 在页面上根据ID定位（jQuery锚点跳转及相关操作）

    JQuery下锚点的平滑跳转 对于锚点的平滑跳转,在一般的商业性质的网站上,权衡来说,要谨慎使用. 例如:让页面平滑滚动到一个id为box的元素处,则JQuery代码只要一句话,关键位置 如下: $( ...

随机推荐

  1. Ext修改Confirm弹框按钮的默认值

  2. Java.lang.NoSuchMethodError: 后带 V/Z等字母的

    知道 Java.lang.NoSuchMethodError: 后带 V/Z等字母的 错误,一般都是 jar包冲突引起的,找到冲突的jar包,去掉一个就好

  3. POJ-Crazy tea party，很好的一道数学题~~~

    Crazy tea party Time Limit: 1000MS   Memory Limit: 10000K        Description n participants of <& ...

  4. centos配置mutt跟msmtp发送邮件

    一.安装mutt yum install mutt 二.配置mutt vi /etc/Muttrc 在里面找到下面几行,并将内容修改为你自己的内容(下面几行分布在不同位置,请耐心查找,记得去掉它行首的 ...

  5. mapStruct笔记

    背景 mapStruct 是一个方便对象转换的工具,类似的工具还有 Dozer, BeanUtils. 实现 mapStruct的核心是在编译期生成基于转换规则的 Impl 文件,运行时直接调用 Im ...

  6. Codeforces936C. Lock Puzzle

    给个串,只能用操作shift x表示把后面x个字符翻转后放到串的前面.问s串怎么操作能变t串.n<=2000,操作次数<=6100. 打VP时这转来转去的有点晕... 可以想一种逐步构造的 ...

  7. Git学习之常见错误 git push 失败

    Git学习之常见错误 git push 失败 问题描述: git push Counting objects: , done. Delta compression using up to thread ...

  8. HDU 6437 最(大) 小费用最大流

    Problem L.Videos Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 524288/524288 K (Java/Other ...

  9. [Bzoj4182]Shopping（点分治）（树上背包）（单调队列优化多重背包）

    4182: Shopping Time Limit: 30 Sec  Memory Limit: 128 MBSubmit: 374  Solved: 130[Submit][Status][Disc ...

  10. mongodb按照日期分组统计

    目录 1.使用时间格式化方法 2.进行时间补偿(默认当前时区是东八区,即8x3600x1000=28800000) mongodb的默认时间是格林尼治时间,如果是要按照日期进行分组需要注意!!!. 解 ...