一、科普时间
hash
hash 属性是一个可读可写的字符串,该字符串是 URL 的锚部分(从 # 号开始的部分)。
location.hash=anchorname。
锚点
锚点是网页制作中超级链接的一种,又叫命名锚记。命名锚记像一个迅速定位器一样,是一种页面内的超级链接
二、锚点简单的栗子
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>伪锚点</title> <style> .anchor1, .anchor2{width:100px;height:100px;margin-top:2000px;margin-bottom:2000px;} .anchor1{background:red;} .anchor2{background:green;} </style> </head> <body> <p> <a href="#anchor1">锚点1</a> </p> <p> <a href="#anchor2">锚点2</a> </p> <div id="anchor1" class="anchor1"> 锚点1 </div>
<div id="anchor2" class="anchor2"> 锚点2 </div> </body> </html>
|
解析
访问该页面的地址:http://127.0.0.1/anchor.html
(我是在本地服务器上测试的)
点击a链接锚点1,则页面会直接跳到红色的div(锚点1),同时,浏览器地址改变为http://127.0.0.1/anchor.html#anchor1
虽然可以直接定位到制定的位置,但是效果很差,没有平缓的过渡效果。
三、改进过渡效果
前期理论准备
既然hash值是对应锚点的id值,那如果改为js动态获取hash值,然后再根据hash值获得dom对象。最后,用js进行平缓过渡。
基于这个思路,就必须要求hash的取名有独特性,不能跟页面中的任何一个id一致,否则会触发浏览器默认的锚点定位行为。
确定特殊hash命名
hash命名直接取特殊的前缀:w_,比如锚点1对应的hash值为w_anchor1
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>伪锚点</title> <style> .anchor1, .anchor2{width:100px;height:100px;} .anchor1{background:red;} .anchor2{background:green;} .spacing1, .spacing2{height:200px;} .spacing1{background:yellow;} .spacing2{background:gray;} </style> </head> <body> <p> <a href="#w_anchor1">锚点1</a> </p> <p> <a href="#w_anchor2">锚点2</a> </p> <p class="spacing1">间隔1</p> <p class="spacing2">间隔2</p> <p class="spacing1">间隔3</p> <p class="spacing2">间隔4</p> <p class="spacing1">间隔5</p> <p class="spacing2">间隔6</p> <p class="spacing1">间隔7</p> <p class="spacing2">间隔8</p>
<div id="anchor1" class="anchor1">锚点1</div>
<p class="spacing1">间隔1</p> <p class="spacing2">间隔2</p> <p class="spacing1">间隔3</p> <p class="spacing2">间隔4</p> <p class="spacing1">间隔5</p> <p class="spacing2">间隔6</p> <p class="spacing1">间隔7</p> <p class="spacing2">间隔8</p>
<div id="anchor2" class="anchor2">锚点2</div>
<p class="spacing1">间隔1</p> <p class="spacing2">间隔2</p> <p class="spacing1">间隔3</p> <p class="spacing2">间隔4</p> <p class="spacing1">间隔5</p> <p class="spacing2">间隔6</p> <p class="spacing1">间隔7</p> <p class="spacing2">间隔8</p> </body> </html>
|
编写读取特殊hasn值的方法以及缓动方法(本示例不考虑兼容性)**
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74
| (function(window, undefined){ window.onload = function(){ scrollToAnchor(); };
window.onhashchange = function(){ scrollToAnchor(); };
function scrollToAnchor(){ var hash = getHash(), anchor = getAnchor(hash), anchorDom, anchorScrollTop;
if(anchor.length < 1){ return; }
anchorDom = getDom(anchor); anchorScrollTop = anchorDom.offsetTop;
animationToAnchor(document.body.scrollTop, anchorScrollTop); }
function animationToAnchor(startNum, stopNum){ var nowNum = startNum + 10;
if(nowNum > stopNum){ nowNum = stopNum; }
window.requestAnimationFrame(function(){ document.body.scrollTop = nowNum;
if(nowNum == stopNum){ return; }
animationToAnchor(nowNum, stopNum); }); }
function getAnchor(str){ return checkAnchor(str) ? str.split("w_")[1] : ""; }
function checkAnchor(str){ return str.indexOf("w_") == 0 ? true : false; }
function getHash(){ return window.location.hash.substring(1); }
function getDom(id){ return document.getElementById(id); } })(window);
|
在线演示:https://wall-wxk.github.io/blogDemo/anchor/anchor.html
最后,附上完整示例源码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>伪锚点</title> <style> .anchor1, .anchor2{width:100px;height:100px;} .anchor1{background:red;} .anchor2{background:green;} .spacing1, .spacing2{height:200px;} .spacing1{background:yellow;} .spacing2{background:gray;} </style> </head> <body> <p> <a href="#w_anchor1">锚点1</a> </p> <p> <a href="#w_anchor2">锚点2</a> </p> <p class="spacing1">间隔1</p> <p class="spacing2">间隔2</p> <p class="spacing1">间隔3</p> <p class="spacing2">间隔4</p> <p class="spacing1">间隔5</p> <p class="spacing2">间隔6</p> <p class="spacing1">间隔7</p> <p class="spacing2">间隔8</p>
<div id="anchor1" class="anchor1">锚点1</div>
<p class="spacing1">间隔1</p> <p class="spacing2">间隔2</p> <p class="spacing1">间隔3</p> <p class="spacing2">间隔4</p> <p class="spacing1">间隔5</p> <p class="spacing2">间隔6</p> <p class="spacing1">间隔7</p> <p class="spacing2">间隔8</p>
<div id="anchor2" class="anchor2">锚点2</div>
<p class="spacing1">间隔1</p> <p class="spacing2">间隔2</p> <p class="spacing1">间隔3</p> <p class="spacing2">间隔4</p> <p class="spacing1">间隔5</p> <p class="spacing2">间隔6</p> <p class="spacing1">间隔7</p> <p class="spacing2">间隔8</p> <script> (function(window, undefined){ window.onload = function(){ scrollToAnchor(); };
window.onhashchange = function(){ scrollToAnchor(); };
function scrollToAnchor(){ var hash = getHash(), anchor = getAnchor(hash), anchorDom, anchorScrollTop;
if(anchor.length < 1){ return; }
anchorDom = getDom(anchor); anchorScrollTop = anchorDom.offsetTop;
animationToAnchor(document.body.scrollTop, anchorScrollTop); }
function animationToAnchor(startNum, stopNum){ var nowNum = startNum + 10;
if(nowNum > stopNum){ nowNum = stopNum; }
window.requestAnimationFrame(function(){ document.body.scrollTop = nowNum;
if(nowNum == stopNum){ return; }
animationToAnchor(nowNum, stopNum); }); }
function getAnchor(str){ return checkAnchor(str) ? str.split("w_")[1] : ""; }
function checkAnchor(str){ return str.indexOf("w_") == 0 ? true : false; }
function getHash(){ return window.location.hash.substring(1); }
function getDom(id){ return document.getElementById(id); } })(window); </script> </body> </html>
|