第一种方法，也是最简单的方法是锚点用<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增加锚点定位的更多相关文章

  1. html中设置锚点定位的几种常见方法（#号定位）

    在html中设置锚点定位我知道的有几种方法,在此和大家分享一下: 1.使用id定位: <a href="#1F">锚点1</a> <div id=&q ...

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

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

  3. 当锚点定位遇上position: fixed

    <!DOCTYPE html><html> <head> <title>当锚点定位遇上position: fixed</title> < ...

  4. Android tabLayout+recyclerView实现锚点定位

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

  5. Android 实现锚点定位

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

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

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

  7. js实现锚点定位

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

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

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

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

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

随机推荐

  1. matlab 人面检测

    Create a detector object. faceDetector = vision.CascadeObjectDetector;Read input image. I = imread(' ...

  2. python的单元测试框架

    1.unittest是Python内置的标准类库.它的API跟Java的JUnit..net的NUnit,C++的CppUnit很相似.   通过继承unittest.TestCase来创建一个测试用 ...

  3. Echarts的legend改变图例图标为自定义图片

    当折线图时,legend默认时rect形式,如果需要改图例形状,可以自己设置legend的icon属性 legend: { icon:'stack' }, 1.自定义每个图例样式:为data的每个对象 ...

  4. Ubuntu下如何安装与运行Redis

    内容中包含 base64string 图片造成字符过多,拒绝显示

  5. 修改ubuntu下网卡名不是eth0的问题

    sudo nano /etc/default/grub 找到GRUB_CMDLINE_LINUX=""改为GRUB_CMDLINE_LINUX="net.ifnames= ...

  6. Ext3.0中复杂表头样例

    注意要点:不出现滚动栏时要设置height和forceFit : false 效果例如以下图: this.columns = [{ header : '月份', dataIndex : '月份', w ...

  7. Jquery Validate结合QTip实现绚丽的表单验证

    相信做过前端开发的童鞋,一定都涉及到表单验证的模块设计,也定都会对Alert的粗暴提示厌恶至极.当然,我也不例外.一直期待着,一种比较优雅提示效果. 看到这,大家可能觉得Jquery Validate ...

  8. 使用notepad++进行替换

    将 aaa bbb ccc 转化为 #define AAA aaa #define BBB bbb #define CCC ccc 查找(.*),替换为#define $1 "$1" ...

  9. 淘宝网前端开发面试题(一)--HTML & CSS 面试题

    所有答案仅供参考,不负责答案对错(^_^) 1.DOCTYPE? 严格模式不混杂模式-如何触发这两种模式,区分它们有何意义? 分析: DOCTYPE(是DOCument TYPE的缩写,即文档类型)是 ...

  10. 编写nios-shell时想到的问题-回车vs换行

    在编写nios上类shell用户交互代码时.由于要检測终端输入字符.所以想到了这个问题,故分析之. 回车符的ascii码,ASCII码13 '\r' 换行符的ascii码.ASCII码10 '\n' ...