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中设置锚点定位我知道的有几种方法,在此和大家分享一下: 1.使用id定位: <a href="#1F">锚点1</a> <div id=&q ...
- 【TRICK】解决锚点定位向下浮动Xpx问题
1. 问题描述 页面滚动后,菜单栏会固定在页头,当锚点定位时,菜单会遮盖部分定位后的内容,所以需要在锚点定位后自动向下漂移Xpx. 2. 解决办法 a. 利用空div 占位,如下: <a hre ...
- 当锚点定位遇上position: fixed
<!DOCTYPE html><html> <head> <title>当锚点定位遇上position: fixed</title> < ...
- Android tabLayout+recyclerView实现锚点定位
原文链接:https://mp.weixin.qq.com/s/L3o2i3WTmg1ScXEYDS8YCg 在上一篇文章 Android 实现锚点定位中,我们介绍了tablayout+scrollV ...
- Android 实现锚点定位
相信做前端的都做过页面锚点定位的功能,通过<a href="#head"> 去设置页面内锚点定位跳转. 本篇文章就使用tablayout.scrollview来实现an ...
- 锚点定位，jquery定位到页面指定位置
jquery锚点定位 $('body,html').animate({scrollTop: $('#ter1').offset().top}, 500);#ter1是你要定位的id对象,500是0.5 ...
- js实现锚点定位
js实现锚点定位的原理是,算出定位的标签距离顶部的高度,点击触发标签,重新赋值滚动条的高度到达指定位置. <!DOCTYPE html> <html> <head> ...
- html锚点定位不准确问题
问题描述 当顶部固定时,点击锚点,会跳转到锚点以下. <style> #one,#two,#three{ height: 500px; } #top{ position: fixed; h ...
- 微信小程序基于scroll-view实现锚点定位
代码地址如下:http://www.demodashi.com/demo/14009.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...
随机推荐
- Could not find com.android.support.constraint:constraint-layout的问题解决
这几天使用android studio的各种坑之一: Error:Could not find com.android.support.constraint:constraint-layout:1.0 ...
- 更为详细的介绍Hadoop combiners-More about Hadoop combiners
Hadoop combiners are a very powerful tool to speed up our computations. We already saw what a combin ...
- OpenCV学习(10) 图像的腐蚀与膨胀(1)
建议大家看看网络视频教程:http://www.opencvchina.com/thread-886-1-1.html 腐蚀与膨胀都是针对灰度图的形态学操作,比如下面的一副16*16的灰度图. ...
- 移植tslib和Qt5.6到三星s5pv210开发板
tslib1.4移植 下载tslib1.4后 1.cp tslib-1.4.tar.bz2 /home/gec 2.tar jxvf tslib-1.4.tar.bz2 3.sudo -s 4.cd ...
- Json转java对象和List集合
public static void main(String[] args) { // 转换对象 String strJson ="{\"basemenu_id\":\& ...
- mysql的日志管理
日志操作是数据库维护中最重要的手段之一,日志文件会记录MySQL服务器的各种信息,所以当MySQL服务器遭到意外损坏时,不仅可以通过日志文件来查看出错的原因,而且还可以通过日志文件进行数据恢复. MY ...
- Android -- 发送Broadcast、有序无序
普通广播 优缺点:和有序广播的优 ...
- SQLServer 之 聚合函数
一.聚合函数介绍 1.聚合函数最常用的: (1) COUNT:求个数 count函数用于计算满足条件的数据项数,返回int数据类型的值. [1] 语法结构:COUNT( {[[ all | disti ...
- 【Linux】cp命令
用途 cp除了复制功能之外还可以建立快捷方式 全称 cp的全称为copy 参数 -a :相当于同时指定参数pdr -d :若文件为链接文件的属性(link file),则复制链接文件属性而非档案本身 ...
- Spring 基于xml配置方式的AOP
我们具体用代码来说明: 1.ArithmeticCalculator.java package com.proc; public interface ArithmeticCalculator { in ...