第一种方法，也是最简单的方法是锚点用<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. 如何把rc.local里执行的shell脚本的日志内容放到其他位置

    rc.local的日志内容默认是/var/log/boot.log /etc/rc.d/rc.local文件的文件头是#!/bin/sh ,我们把这修改成#!/bin/sh -x,这样系统启动后就会把 ...

  2. 在线分享Oracle尖峰时刻--2014年中秋节尖峰在线福利！

    **********************************************************            2014年中秋节尖峰在线福利!*************** ...

  3. Logback的配置和使用(终极)

    1.logback介绍 logback是由log4j创始人设计的又一个开源日志组件.logback当前分成三个模块:logback-core,logback-classic和logback-acces ...

  4. ndk 编译 c++ 兼容性问题汇总整理

    转自:http://blog.csdn.net/wenrenwang/article/details/12003671 1.__int64找不到符号 采用int64_t来代替: #if defined ...

  5. 移植QT5.6到嵌入式开发板（史上最详细的QT移植教程）

    目前网上的大多数 QT 移植教程还都停留在 qt4.8 版本,或者还有更老的 Qtopia ,但是目前 Qt 已经发展到最新的 5.7 版本了,我个人也已经使用了很长一段时间的 qt5.6 for w ...

  6. [多校2015.02.1006 高斯消元] hdu 5305 Friends

    题意: 给你n个人m条关系 每条关系包括a,b 代表a和b能够是线上朋友也能够是线下朋友 然后保证每一个人的线上朋友数和线下朋友数相等 问你有多少种组成方法 思路: 官方题解是爆搜+剪枝,然而并不会写 ...

  7. Myeclipse最全快捷键

    转自:http://www.iteye.com/topic/1051317 Ctrl+1 快速修复(最经典的快捷键,就不用多说了) Ctrl+D: 删除当前行  Ctrl+Alt+↓ 复制当前行到下一 ...

  8. angularjs中ng-class的使用

    1.方法一 通过数据的双向绑定(不推荐) <!DOCTYPE html> <html ng-app="myApp"> <head> <me ...

  9. 如何使用飞秋FeiQ实现两电脑通信（或传输文件）

    如何使用飞秋FeiQ实现两电脑通信(或传输文件) 1. 在两天电脑上,分别按照飞秋FeiQ 我使用的绿色飞秋2013正式版 2. 使用一根网线,将两电脑的网口连接一起 3. 设置飞秋FeiQ的端口号不 ...

  10. 为pc编译配置安装当前最新的内核

    搜索公众号:itxxgh  (IT学习干货),全公益.免费.定期,提供,<IT学习教程>.不会骚扰大家,仅仅需轻点关注,也会传播<中华传统文化>传播正能量.  或扫描二维码 1 ...