hash (#号)锚点 散列点

本文转载了两个地方
1.https://www.jianshu.com/p/9a7d79249741
2.此教程讲述的很清楚，而且还有案例 https://www.cnblogs.com/joyho/articles/4430148.html

1.了解锚点

这是一个简单的demo,运行一下你会发现点击不同的链接，就会定义到对应的div，并且要注意地址栏里边也会发生相应的变化

锚点1 
 
 
11111111111 

 
11111111111 

11111111111 

11111111111 

11111111111 

11111111111 

11111111111 

11111111111 

11111111111 

11111111111 

11111111111 

11111111111 

11111111111 

11111111111 

11111111111 

11111111111 

 
 
 

 
 
11111111111 

 
11111111111 

11111111111 

11111111111 

11111111111 

11111111111 

11111111111 

11111111111 

11111111111 

11111111111 

11111111111 

11111111111 

11111111111 

11111111111 

11111111111 

11111111111 

 
 
 

小demo

此demo转载自https://www.jianshu.com/p/9a7d79249741

    
    
    
    



    

    h1
    h2
    h3

    
    

从图中我们可以看到，使用 hash 并不会导致浏览器刷新,并且我们 js 拿到了 hash 值并且打印出来了。

'#'号是用来指导浏览器动作的，对服务器端完全无用。所以，HTTP请求中不包含 '#'

'#'后面的字符

在第一个‘#’后面出现的任何字符，都会被浏览器解读为位置标识符。这意味着，这些字符都不会被发送到服务器端。

改变'#'会改变浏览器的访问历史

每一次改变'#'后的部分，都会在浏览器的访问历史中增加一个记录，使用"后退"按钮，就可以回到上一个位置。

这对于ajax应用程序特别有用，可以用不同的'#'值，表示不同的访问状态，然后向用户给出可以访问某个状态的链接。

值得注意的是，上述规则对IE 6和IE 7不成立，它们不会因为#的改变而增加历史记录。

window.location.hash读取#值

window.location.hash这个属性可读可写。读取时，可以用来判断网页状态是否改变；写入时，则会在不重载网页的前提下，创造一条访问历史记录。

onhashchange事件

这是一个HTML 5新增的事件，当#值发生变化时，就会触发这个事件。IE8+、Firefox 3.6+、Chrome 5+、Safari 4.0+支持该事件。

它的使用方法有三种：

1.window.onhashchange = func;

2.

3.window.addEventListener("hashchange", func, false);