anchor-js
Version:
A Javscript utility for adding deep anchor links to online docs.
92 lines (82 loc) • 12 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AnchorJS Example</title>
<style>
.main {
font-family: Georgia, serif;
font-size: 1.4em;
margin: 80px auto;
width: 600px;
}
p {
font-size: 16px;
}
.page-title {
font-size: 2em;
text-align: center;
}
.anchorjs-logo {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAIAAAAiOjnJAAARKklEQVR4AezSwQ2AIBREQYuzFNqhM28eOBACR7rQJtR84rwONjvbJb0QWAJLYAks6T+wBJYElsASWBJYAktgzTn3xVPOORys3vu2eEopgSWwYiewBJbAAktgCSyBBZbAElgCCyyBJbC0TmAJrPc36INTwBJYAgsssMASWAILLLDAEljPJ7AEFlittTNYY4zlYYFVSjmCVWsNDgsssMACCyywwAILLLDAAgusm717/2riiOIA/r/aCFWrttW2GgIigAiKVnyj+KptBZQqgFFJlaqIAgECBIQCQQhvAsRASggJ/bJN6ele2Jnotu6EO2d+0k1Tz3zOndk7cydtTY3dT+q8D+//1T0NLndLC8P6EFgMy/PM1f/TldGSnKkje2YPf6brMxk7J44d8F051fvLHffrJobFsAQNoQhWxosOQ4+g220JZI50X2lxR4OLYTGszVu3s3q84BsNDZUk6DN229DV022vGhnWP41hYTp7d7FQTMoA1uH1ADadtbunupJhrTeG1fHbUyyYJFUJuh3dNnjzfGtLC8Pa1rA8rkdTR/fChGldC13DFwuxXGNY2xRW56+Pp4/sIYHKlA5bRYhbDGt7wCKqCAgz+8CtCwxre8GCqqns3WZLInOi3eatrWJY2wUW1lUfoyqpqXM6e097UyPDSn1YYlXEEFKg/uJM5CN8pSdHSnIntFyXfEeCPsVhMax1VcmsqyYKDvbev+N+85pmKAbLzsxm7JTJbyF3iudTFhbD+v3Vc6iSD1S/375snDLwPH82XnRIKmhdPZ2asBhWdHxkOltaVcbOngcVrRINwWy0JFe80srchSdTDRbDio69C+Tsk1flrb1HERjYGi8Ux61eSFUbFsOiqo7uNVkVmROF6y3f5ZPqwmJYVNWwSaoEbajsjOA9IP9rKVgMKwVV1VBVsq2j4Vfh+S138xsxLIbFqnQNMck4d+p5Wq82LIYVfTcQWN9dtsmoQv4TJ9lbP7qNnBW8HnY/qlEYFsOK+hGrvpCMVTOiWCXfhkuLjb/OW/eLqrAY1srQ28CRXSbGKvn27kKBIGI5q5WExbCifl+Ssepuq3ltrNhh/KWd9U71YDEs5NYD2fKq0sxV1fa6SZjKamt8oRgshrUamJ7L/+pTxSq0t1U/CnZ1snYplsdiWPHI8nyx/ROqcjc3T+YJWI+eOaoYLIYVqrz2CVWhDdy6KPz2/p+uqgSLYa34+mXeAQNmratIw+6yDGscyVIHFsOKxxdKsgFLqGrWkT74pMZ0VThdgygoPKw8djJDpfNYDCvS7cawyaiK9LRvWlfYrt0k84GqqisFqsiZGTVgMaxgaaG4VEZTtWldYfurl+PHv8XR4b7yG0mrqrkrowoP4CtQYKgMLIYVWwhgEhQWvEc6W2j514aqjYcHb5zbGH5h8xqoIr374QOViikY1h8vnwgHNex6QMu/iKpEH7p+VkpV7T15VcOXTyhWV8iw3t86azyo8ycOra2uUlgbquh1Mf0/l4lUVc1Kq0KRD+6xUQwWw0Kq3XiAl92NuvIvnSrS10u1upzVW66r6pJQhbtGSIrBYrAYViwU1OcZ/ggLVleONDyjg0VV0T6Zs38jzJBYlSajCs+gzgxV/Ja+bYZhYXc5eP17/ebg5Jjx6C5cyNd9pK+9LaFK1AduXqAIxk5g10haleuRpe/HYlhQFcjbv3CpQP/nI4PGA/z+9nn9v7G6fEZcu5yoqW8nJxGw/EoqVlkJFsOiqnL3rYef83n6v/L1G49xqPwKLbHvdDknjh2UsYVb+fRJrxcNcCOpymKwGBZVZbdhwObPHKHVgsYygmXFFJZ2cOqV/2SGzNKb1Ndrs6FdrMpKsBgWVZWjqdJe1pA4oNlR4+AxV3AAO4kUFlp748vJ3C/FiU1yanno+jmhKmvCYlhUldYd6WuxmG77OZD5ubEMVIBtefFavVOLPUaJ+6FrJTThvpUqD1mtWwoWw6KqEj02P6t7cuFsjvGiJ1RxdStYWu3DccGRhKJD9PaiTVRlE1XWgMWwxKrQI287dQ8v1vxsLAPJTPwHt4LVVe8Uvhvqdg+x6kIG9d+qdhNVVoHFsMSq0Jce3dUf8evvpo/RXZ34UmhTWEAzJSq+6Hjxm44CFmdUlTVhMSyxKowiTWVh1TWX/6XwlN/C5ePx5TCFheY/nWX8WepmvOAgUWVVWAwLuQOqis5rseC87oNLzkqZpNT86Uws5Aks8TKr+3GtPuOgXeEHVeQd0BKwGJZYFe04J6OPWe8X8G4otX/nSBuurkj2toWu+of6IHfCjtU6UWUBWAyLqNpLVMlu/6EtPamS+mxJNvYK9fMawo8hSs8zl+4jqOIiM6DFYDGs1YlRSVUY/oAjHav1NdLiK5G54weFqrCE102F+Am4GcEBVBs95kD2EC0Gi2HF5mbmjn0tJrWhqq9rywqwwV6tvN1moIou3vvu3Rbs6uTsU+A3oRkWqV3OkFWVmbbS17lm2MIND41V6WDhcj0kDoznwZFz+QxLMVihijJ5VZG3njWJtlhX/tf8RVVRWDhxJa5dLr/OsFSChUlNTpVWD9jrkS9eRRKVqqKw8GMT8Cc8A4NzMgxLHVixGCZB8YL97yrTpEt3mp5ivUVVJWAl6gHThKz9p7LwMMNSBlaks1k2VnnbP/gC0nh4kf45YP2tSvwe2lN9l2GpBAtnQcVVpo401M6vmd1wdwOOJsuoGi/8DjuJDEsZWKvTE8LL0NEjnmbTVWFWlYxV+B8gOznWhsWwws9qheO65HrwX6jC3CqjCt13idQuWxwWwwpeOyXYLcbZ9nj8v1AVkKxdPnYA2XaGpRgsXGls/JKPpf0nVEVrlxmWArBwEsF4XHFOARl5k1VlpEmqwuWzdHeZYSkAKzo6JCjYulJkpqreDsQqeVX0EnaGpQaslYEeQYlpRdmaSW2547XRretkBqQ/n8Sw1IEl2slZvP+DArHKcrAYlq9feNuCGbHqjXbTkE0yVtGjfAxLMVii+2Fs86cy/t9YtbvTRWMVw1INFo56CgPJ6uzkR6jyyL8DTkEVfQdkWIrmsVDlJ1hm1ZV/sCr5WEXvr2JYasMKVZaJUlnpKKW3lCqGpQCsZc8bcTnNuVxMmkmpCjikZ0DxnTAMS0FYECPz86e4DlnSFk7XyKuaFtcDMixlz2MhWSWDAHFLMCfGYuGntTAqqQp3uPU3ahcxMKyUhLU6MwkN6GIKmelYy6NKjIY9TKmJIh+7TVIV7obACVKGlcrFFItVNyWLKRJnab7PwuQYqroRulMaLC0MZO3a+FtJVaiMxfcyrBSHFV8MzeXtl2QhbUigimFti7pClApiFqNHOs3tc7n7E6qsCmt4eJhhmfxvWHpcRRZJpqrKS6iyJiy32z01NWX+oDAsHEHGHaHmk9Kw6mKV1WB5vd5wOGzaoDAsmjLANf8aBVNjVf5XRJWFYPn9/lgsZvagMCxaF++sNMeWPXF5H8lQWAWWx+MJBoNrBo1h7dixw8xjxF2tgaN7P3L6Q8cZVHJq3iqwBgYGotHon+ydQSh1WxTHFwCAhAAkCVKKK4RAoShEpUwN9TIxeWVq9ryhIURRSageAUykUHqFl68iqee79Lge7vv69vuP1ojq2Evte8/5ja+6Tr9z1trrv/e5ygqXl5e2EysoKGhkZMTr9SohcCjeszQDOaw+vfjcmPfbuWJMEuvo6Oj7d8vJOrr7wsJCe4nFuFyui4sLJQfm8sh83PyW7I9foswf+GdiDL/6rLhrMUyss7Oz19dXaxfhx4/R0dGQkBAC9hQLREZGjo+PK1F+/udFcfQsTj389iv2Gb83SvjlcfL3f/f+4HYKmCYWHjm3t7c/LZ6/vbq6amhoIMaeYjHd3d38tBcG96/7b/w6ofevP73fzrDc499NZQwU6/T01OPxKItMT0/HxcURcMRiUlJSVldXlTnoi6UxT8ftoKxwf3/f29tLgHHEYgICAgYHB5+fn20r1snJCRRRFtnZ2cnOzqZ3ccRiiouLj4+PbSgWEmWry+S3tzcsrrHEJuCXYuGKDA8P45FDEkRFRU1MTNhHLA7+rN7MtbW1JER+fj6+hlliMVtbWxkZGSREc3Mz4gu/F4uDP0tgKR0REUFAogMZGhp6eXlRcpCS5uHhoa+vj4SIj4+fm5vzH7E0gj8GM4jW1lYSIjExcXFxUTFmisVMTk5iQEVCDAwMPD09+bxYGsEfs7y8nJycTELU19dfX18rxnyxAJ7wpaWlJERubu7+/r7Pi6UR/GGxjCWzVBeLuTyKKU9ffUksgLKN4i11LYKDg5FUYMBjvFjywR/+ioM/ffLy8g4ODhTjW2IxKOEo5CREZWUlluWmiiUf/KED4+BPhP7+fi7Bvi0WQCFHOSchYmJiMIwwXyz94A/XrbGxkYSIjo5G76sYXxeL7zwUdcE7r6enx+12my6WRvA3MzPDwZ8+ZWVleF4q4E9iMSjtKPAkRGZm5ubmpqFiaQR/GNnoB39MYGAgiinP9P1TLIACjzJPQG64h8bFLLE0gr/d3V394I9JTU1dX19XjB+LxYMulHwSoqSkBGMhI8TSCP7wecHgD7S3t3NSZBexAEo+Cj8JER4erj+Y0RVLI/g7Pz+vqKggIUJDQ/lq2E4sgBKGexRNAAnR0tJyc3Pz9WIZGvxxnIxvohi7icWsra2hFSAhkpKSlpaWvkgs8eDv7u6uq6uL5MB0/vHxUQFHLIDa0dbWRsDgeBFiyQZ/Kysr2DdLQiQkJCwsLCgAHLEYNASoCGgOSIiCggLZigCxzAz+QE1NzTsvCHHEYg4PD9EiEDAvXoRYIsEf9scWFRWREFhF4n/80GxHLAYtAgoZyVFVVYWHiqRYGsHf2NhYWFgYCZGenq4xIraTWMz8/Dx2+ZEQsbGxU1NT+mJpBn9NTU0kR2dnJ3p/BRyxLIGmobq6muRAToJ4UVOszwV/s7OzgvcJNlF+Pk52xAJoHdBACA66srKytre3Py2W9eBPvrJj+ySmZQo4YmmysbGRlpYmGy/i4JSyyCfmF3t7ezk5OSSH2KkHRyweJHZ0dJAc5eXlX7eNhIM/LEvNPfXgiMWDLuzvEzyjgRTliwI1vELH5XKRHHV1dXjbx//tnTGqYlEQBXsNRsYiZoILMDdwAwpm7kVwL2pgJpgrxsaCiYiRO7hzomYS8Y0ekDtULeBHxedxu6stdhArOZ/P/X4/fIxGo9vtVnzIfu24hvBVD28nRYhlQFNefWqEDwVV2+22fI0eS3U2J3x0Op3m1QNieViv161WKxLHPZIP3hESncrJwV8l1QNivT4yZjxeIJRY5f0C/+Dvt9UDYn1wFlHzMuM3jf6gvmmaD/50HicMmKsHxDJwOByUSocPXVvUv8Mmgz9trhqrB71QGPf3EcvA8/mcTCbhQ+mVAqzyAu306RhOCF/1oIXHYgKx/I2Gbmt5x4tZ2tgHf4mWHP3VA2LZ9zwHg0H4UIylW4w51cnBX13VA2IZ0KvBfD4P4fuiXywWWm3Qgp5X2Tyhg1jVsNvt2u12eKm/ekAsA/f7XRObMGE8U+iuHhCr/kaj/uoBsXycTqdutxsGqq8eEMt/jGQ2m4WD+qsHxPr9MRIDWlHM6gGx/lsul4uCsDBQQfWAWHU2GvVXD4jlZ7/fG4+R+KsHxKqXx+MxHo/DitYPN5tNqR/EMjx0KXv3Vw+IBVoc7fV6X84TtZ6VOStigaHRUPVwPB4LvBILVquVLpjFvzCdTt9XD4gF1+t1OBw2/MHORs9UiAX50PW20VD1oKXCAoj1wQ/Gasbnrx4QCzTj032z+AstDxqqB8SC/MFYf/WAWKCF9+VyyTMVYgFiAWIBIBYgFiAWAGIBYgFiAfxALIA/AIl7RgYokToAAAAASUVORK5CYII=);
background-position: center center;
margin: 20px auto;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<section class="main">
<h1>A page with lots of synchronous javascript (delays before DOMContentLoaded).</h1>
<h2 class="load-order-1">Before </body></h2>
<p>Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.</p>
<h2 class="load-order-2">On DOMContentLoaded</h2>
<p>Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.</p>
<h2 class="load-order-3">On $(document).ready()</h2>
<p>Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.</p>
<h2 class="load-order-4">On window.onload</h2>
<p>Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.</p>
<h2 class="load-order-5">On arbitrary setTimeout</h2>
<p>Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.</p>
<p>Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.</p>
<p>Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.</p>
<p>Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.</p>
<p>Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.</p>
<p>Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.</p>
</section>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="../anchor.js"></script>
<script>
var Anchor1 = new AnchorJS(),
Anchor2,
Anchor3,
Anchor4,
Anchor5;
console.log('Added anchors before </body>: ' + performance.now());
Anchor1.add('.load-order-1');
document.addEventListener("DOMContentLoaded", function(event) {
console.log('Added anchors on DOMContentLoaded: ' + performance.now());
Anchor2 = new AnchorJS();
Anchor2.add('.load-order-2');
});
$(document).ready(function() {
console.log('Added anchors on $(document).ready(): ' + performance.now());
Anchor3 = new AnchorJS();
Anchor3.add('.load-order-3');
});
window.onload = function() {
console.log('Added anchors on window.onload: ' + performance.now());
Anchor4 = new AnchorJS();
Anchor4.add('.load-order-4');
};
setTimeout(function() {
console.log('Added anchors after a 2 second setTimeout: ' + performance.now());
Anchor5 = new AnchorJS();
Anchor5.add('.load-order-5');
}, 2000);
for(var i=0; i<500000000; i++)
{} // this synchronous script is going to delay parsing of the DOM. So the DOMContentLoaded event is going to launch later.
</script>
</body>
</html>