anchor-js

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>AnchorJS - Add deep anchor links to your docs</title> <link rel="icon" type="image/x-icon" href="favicon.ico"> <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,400,700' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="fonts/fonts.css"> <link rel="stylesheet" href="//cdn.jsdelivr.net/prism/1.5.1/themes/prism-twilight.css"> <script src="grunticon/grunticon.loader.js"></script> <script> grunticon(["grunticon/icons.data.svg.css", "grunticon/icons.data.png.css", "grunticon/icons.fallback.css"]); </script> <noscript> <link href="grunticon/icons.fallback.css" rel="stylesheet"> </noscript> </head> <body> <header class="header"> <h1 class="page-title">AnchorJS</h1> <img class="logo" src="img/anchorjs_logo.png" /> <div class="desc"> <p class="maindesc">Add deep anchor links to your docs.</p> <p class="subdesc">What are "deep anchor links"? Here are a few examples:</p> </div> <div class="preview-examples"> <div class="example"> <div class="example-content"> <h3 id="basic-link-preview">Basic Link</h3> <p>Lorem ipsum dolor consectetur amet nulla elit. Vivamus luctus urna sed urna ultricies. Vivamus luctus urna sed.</p> <a href="#" class="example-code-link">{}</a> </div> <div class="example-code"> <pre class="js"><code>anchors.options.visible = 'always'; anchors.add('h3');</code></pre> </div> </div> <div class="example"> <div class="example-content"> <h3>Paragraph Link</h3> <p id="paragraph-link-preview">Lorem ipsum dolor consectetur amet nulla elit. Vivamus luctus urna sed urna ultricies. Vivamus luctus urna sed.</p> <a href="#" class="example-code-link">{}</a> </div> <div class="example-code"> <pre class="js"><code>anchors.options = { visible: 'always', placement: 'left', icon: '¶' }; anchors.add('p');</code></pre> </div> </div> </div> <p class="more-examples"><a href="#examples">See more examples</a></p> <div class="used-by"> <h2 class="used-by-label">Used by</h2> <a href="http://primercss.io/about/"><img src="https://avatars.githubusercontent.com/u/7143434?v=3&s=120" alt="Primer CSS Logo" title="PrimerCSS"/></a> <a href="http://getbootstrap.com/getting-started/"><img src="https://avatars.githubusercontent.com/u/2918581?v=3&s=120" alt="Bootstrap Logo" title="Bootstrap" /></a> <a href="http://eslint.org/docs/rules/"><img src="https://avatars.githubusercontent.com/u/6019716?v=3&s=120" alt="ESLint logo" title="ESLint"/></a> <a href="https://middlemanapp.com/basics/install/"><img src="https://avatars.githubusercontent.com/u/1280820?v=3&s=120" alt="Middleman logo" title="Middleman"/></a> <a href="http://learn.getgrav.org/"><img src="https://avatars.githubusercontent.com/u/8237355?v=3&s=120" alt="Grav Logo" title="Grav" /></a> </div> </header> <section class="main"> <h2>Overview</h2> <img class="anchorlink-examples" src="img/anchorlinks2.png" alt="Examples of deep anchor links from across the web." /> <p>AnchorJS lets you drop deep anchor links (<a href="http://ux.stackexchange.com/q/36304/33248">like these</a>) onto any webpage, and be on your way.</p> <p>You don't need to set up IDs or worry about urls. AnchorJS will respect your IDs if you have them, and generate them if you don't.</p> <p>It uses an attractive link icon by default, but you can customize the display via <a href="#options">options</a> and CSS syling. The <a href="#examples">examples</a> demonstrate a few customization ideas.</p> <p>Finally, AnchorJS is <strong>lightweight</strong>, <strong>accessible</strong>, and has <strong>no dependencies</strong>.</p> <h2>Installation</h2> <p>Download AnchorJS using npm,</p> <pre><code>npm install anchor-js</code></pre> <p>or bower:</p> <pre><code>bower install anchor-js</code></pre> <p>(or just <a href="https://github.com/bryanbraun/anchorjs/releases">download it from github</a>).</p> <p>Then include the anchor.js file (or anchor.min.js) in your webpage.</p> <pre><code class="language-markup"><script src="anchor.js"></script></code></pre> <p>You could also include it via a CDN like <a href="https://cdnjs.com/libraries/anchor-js">CDNJS</a> or <a href="http://www.jsdelivr.com/projects/anchorjs">jsDelivr</a>.</p> <p>If you're using it from Node/CommonJS, include it via:</p> <pre class="src-js"><code>var anchorJS = require('anchor-js'); var anchors = new anchorJS();</code></pre> <h2>Basic usage</h2> <p>AnchorJS provides the <code>anchors.add()</code> method which takes a CSS selector (similar to jQuery) for targeting elements you want to deep-link. Here are some usage examples.</p> <pre class="src-js"><code>/** * Example 1 * Add anchors to all h1's on the page */ anchors.add('h1'); /** * Example 2 * Adds anchors to elements that have been assigned the class '.anchored' */ anchors.add('.anchored'); /** * Example 3 * If no selector is provided, it falls back to a default selector of: * 'h2, h3, h4, h5, h6' */ anchors.add();</code></pre> <h3>Don't run it too late!</h3> <p>You need to add anchors to the page early in the page load process if you want browsers to jump to the ID properly.</p> <p>We recommend you call <code>anchors.add()</code> before the DOM finishes loading...</p> <pre><code class="language-markup"> <script> anchors.add(); </script> </body></code></pre> <p>...or on DOMContentLoaded:</p> <pre class="src-js"><code>// Add anchors on DOMContentLoaded document.addEventListener("DOMContentLoaded", function(event) { anchors.add(); });</code></pre> <p>Don't add anchors on later events, like <code>$(document).ready()</code> or <code>window.onload</code> as some browsers will attempt to jump to your ID before AnchorJS can add it to the page. For more details, see <a href="https://github.com/bryanbraun/anchorjs/issues/69#issuecomment-255503575">github issue #69</a>).</p> <h2>Options</h2> <p>You can set a number of options to customize how your anchors look:</p> <table class='options-table'> <thead> <tr> <th>Option</th> <th class="minicol">Accepted Values</th> <th class="minicol">Default Value</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><code>placement</code></td> <td><code>right</code> <br> <code>left</code></td> <td><code>right</code></td> <td><code>right</code> appends the anchor to the end of the element.<br> <code>left</code> places it to the left, in the margin.</td> </tr> <tr> <td><code>visible</code></td> <td><code>hover</code> <br> <code>always</code> <br> <code>touch</code></td></td> <td><code>hover</code></td> <td><code>hover</code> displays the anchor when hovering over the element.<br> <code>always</code> will always display the anchor link. <br> <code>touch</code> will <em>always</em> display anchors for devices that support touch events, and only display them via <em>hover</em> for devices that do not support touch events. This approximates touchscreen detection (but <a href="http://www.stucox.com/blog/you-cant-detect-a-touchscreen/">isn't 100% accurate</a>).</td> </tr> <tr> <td><code>icon</code></td> <td>(any unicode character)</td> <td><code style="font-family: 'anchorjs-icons'; font-size: 24px; -webkit-font-smoothing: antialiased;"></code></td> <td>Replace the default link icon with the character(s) provided. These are a few good options: <code>#</code>, <code>¶</code>, <code>❡</code>, and <code>§</code>.</td> </tr> <tr> <td><code>class</code></td> <td>(any string)</td> <td>(none)</td> <td>Adds the provided class(es) to the anchor html.</td> </tr> <tr> <td><code>truncate</code></td> <td>(any positive number)</td> <td><code>64</code></td> <td>Truncates the generated ID to the specified character length. <small>Note: the length may not be exactly the same, if there are dangling spaces or hyphens to be trimmed.</small></td> </tr> </tbody> </table> <p>For example:</p> <pre class="src-js"><code>/** * Example 1 * Add anchors to all h1s, h2s and h3s inside of #post. * Anchors will be always visible. */ anchors.options.visible = 'always'; anchors.add('#post h1, #post h2, #post h3'); /** * Example 2 * Provide options as an object before adding anchors to the page. * Adds always-visible ¶ anchors in the left margin of each p tag inside .story */ anchors.options = { placement: 'left', visible: 'always', icon: '¶' }; anchors.add('.story > p');</code></pre> <h2>Advanced usage</h2> <section id="section-ids"> <h3 data-anchor-id="section-ids">Section IDs</h3> <p>In some cases, you might want to link to existing section IDs instead of the heading element itself. You can instruct AnchorJS to do this with the <code>data-anchor-id</code> attribute:</p> <pre><code class="language-markup"><section id="section-1"> <h3 data-anchor-id="section-1">Section 1</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p> </section></code></pre> <p>This allows you to do things like <a href="https://css-tricks.com/on-target/#article-header-id-3">highlight sections when your users jump to them</a>.</p> </section> <h3>Removing anchors</h3> <p>You can remove anchors with the <code>anchors.remove()</code> or <code>anchors.removeAll()</code> methods:</p> <pre class="src-js"><code>/** * Example 1 * Remove anchors from all h1s on the page. */ anchors.remove('h1'); /** * Example 2 * Remove all anchors from the page. */ anchors.removeAll();</pre></code> <p>Removing anchors with <code>.remove()</code> should be uncommon. If you simply want anchors on a more selective group, consider using <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:not">the CSS <em>:not()</em> pseudo-class</a> when you add them, like so:</p> <pre class="src-js"><code>/** * Example 2 * Add anchors to all h2s, except for those with a class of "no-anchor". */ anchors.add('h2:not(.no-anchor)');</pre></code> <h3>Chaining commands</h3> <p>You can chain commands of <code>add()</code> and <code>remove()</code> (since they return a copy of <code>anchors</code>), but it's usually more performant to lean on CSS when targeting elements: <pre class="src-js"><code>/** * Example 1 * Adds anchors to `.my-anchors` and `.my-other-anchors` except for those * with a class of `no-anchor`. */ anchors.add('.my-anchors').add('.my-other-anchors').remove('.no-anchor'); /** * Example 2 * A more performant way to add anchors to the same classes in Example 1 above. */ anchors.add('.my-anchors:not(.no-anchor), .my-other-anchors:not(.no-anchor)');</code></pre> <h3>Multiple sets of anchors</h3> <p>You can have multiple sets of anchors on one page, each with their own design. To do so, just create your own instances of the AnchorJS object:</p> <pre class="src-js"><code>var sidebarAnchors = new AnchorJS(); anchors.add('.main h2'); // The default instance. sidebarAnchors.add('.sidebar h2'); // The new instance.</code></pre> <p>You can preset your instance with whatever options you like:</p> <pre class="src-js"><code>var sidebarAnchors = new AnchorJS({ placement: 'left', icon: '¶' }); sidebarAnchors.add('.sidebar h2');</code></pre> <h3>Generating navigations</h3> <p>AnchorJS doesn't include methods for dynamically generating navigations (like a table of contents or jump nav). This is to keep AnchorJS lightweight and simple for the most common usecases.</p> <p>However, AnchorJS <em>does</em> expose a list of all anchored elements at <code>anchors.elements</code>. This way, external code can look up the elements and use them to generate navigations (as shown in <a href="https://jsfiddle.net/bryanbraun/nc6rL9hk/">this example</a>).</p> <p>You can also use AnchorJS alongside a static navigation with pre-defined IDs (as is done in <a href="https://jsfiddle.net/bryanbraun/x85hfvbk/">this example</a>).</p> <h2>Examples</h2> <div class="examples"> <div class="example"> <div class="example-content"> <h3>Basic Link</h3> <p>Lorem ipsum dolor consectetur amet nulla elit. Vivamus luctus urna sed urna ultricies. Vivamus luctus urna sed.</p> <a href="#" class="example-code-link">{}</a> </div> <div class="example-code"> <pre class="js"><code>anchors.options.visible = 'always'; anchors.add('h3');</code></pre> </div> </div> <div class="example"> <div class="example-content"> <h3>Basic Link - Left</h3> <p>Lorem ipsum dolor consectetur amet nulla elit. Vivamus luctus urna sed urna ultricies. Vivamus luctus urna sed.</p> <a href="#" class="example-code-link">{}</a> </div> <div class="example-code"> <pre class="js"><code>anchors.options = { visible: 'always', placement: 'left' }; anchors.add('h3');</code></pre> </div> </div> <div class="example"> <div class="example-content"> <h3>Paragraph Link</h3> <p id="paragraph-link">Lorem ipsum dolor consectetur amet nulla elit. Vivamus luctus urna sed urna ultricies. Vivamus luctus urna sed.</p> <a href="#" class="example-code-link">{}</a> </div> <div class="example-code"> <pre class="js"><code>anchors.options = { visible: 'always', placement: 'left', icon: '¶' }; anchors.add('p');</code></pre> </div> </div> <div class="example"> <div class="example-content"> <h3>Octothorp</h3> <p>Lorem ipsum dolor consectetur amet nulla elit. Vivamus luctus urna sed urna ultricies. Vivamus luctus urna sed.</p> <a href="#" class="example-code-link">{}</a> </div> <div class="example-code"> <pre class="js"><code>anchors.options = { visible: 'always', icon: '#' }; anchors.add('h3');</code></pre> </div> </div> <div class="example"> <div class="example-content"> <h3>Unicode Icon 1</h3> <p>Lorem ipsum dolor consectetur amet nulla elit. Vivamus luctus urna sed urna ultricies. Vivamus luctus urna sed.</p> <a href="#" class="example-code-link">{}</a> </div> <div class="example-code"> <pre class="js"><code>anchors.options = { visible: 'always', placement: 'left', icon: '§' }; anchors.add('h3');</code></pre> </div> </div> <div class="example"> <div class="example-content"> <h3>Unicode Icon 2</h3> <p id="unicode-icon-2">Lorem ipsum dolor consectetur amet nulla elit. Vivamus luctus urna sed urna ultricies. Vivamus luctus urna sed.</p> <a href="#" class="example-code-link">{}</a> </div> <div class="example-code"> <pre class="js"><code>anchors.options = { visible: 'always', icon: '❡' }; anchors.add('p');</code></pre> </div> </div> <div class="example"> <div class="example-content"> <h3>Custom Text</h3> <p>Lorem ipsum dolor consectetur amet nulla elit. Vivamus luctus urna sed urna ultricies. Vivamus luctus urna sed.</p> <a href="#" class="example-code-link">{}</a> </div> <div class="example-code"> <pre class="js"><code>anchors.options = { visible: 'always', icon: '# LINK' }; anchors.add('h3');</code></pre> <pre class="css"><code>.anchorjs-link { font-weight: 200; margin-left: 1em; padding-right: 0.375em; font-size: 0.5em; border: 1px dashed #FFBAAC; vertical-align: middle; }</code></pre> </div> </div> <div class="example"> <div class="example-content"> <h3>Custom Image</h3> <p>Lorem ipsum dolor consectetur amet nulla elit. Vivamus luctus urna sed urna ultricies. Vivamus luctus urna sed.</p> <a href="#" class="example-code-link">{}</a> </div> <div class="example-code"> <pre class="js"><code>// Use an empty string ('') for the icon when styling the background with CSS. anchors.options = { visible: 'always', placement: 'left', icon: '' }; anchors.add('h3');</code></pre> <pre class="css"><code>.anchorjs-link { width: 14px; height: 32px; margin-top: 6px; margin-left: -1.25em !important; background: url('img/mini-logo.png') no-repeat; }</code></pre> </div> </div> <div class="example"> <div class="example-content"> <h3>Link w/CSS Styling</h3> <p>Lorem ipsum dolor consectetur amet nulla elit. Vivamus luctus urna sed urna ultricies. Vivamus luctus urna sed.</p> <a href="#" class="example-code-link">{}</a> </div> <div class="example-code"> <pre class="js"><code>anchors.options = { visible: 'always', placement: 'left' }; anchors.add('h3');</code></pre> <pre class="css"><code>.anchorjs-link { display: inline-block; height: 32px; width: 18px; border-radius: 50%; background-color: #FF5231; color: white; margin-top: 4px; margin-left: -1.4em !important; } .anchorjs-link:before { margin-left: 7px; margin-top: -4px; display: block; }</code></pre> </div> </div> <div class="example"> <div class="example-content"> <h3>Icon Font</h3> <p>Lorem ipsum dolor consectetur amet nulla elit. Vivamus luctus urna sed urna ultricies. Vivamus luctus urna sed.</p> <a href="#" class="example-code-link">{}</a> </div> <div class="example-code"> <pre class="js"><code>// Just pass in the octal code for your icon-font character. anchors.options = { visible: 'always', icon: '\uf0c1' }; anchors.add('h3');</code></pre> <pre class="css"><code>.anchorjs-link { font-family: 'your-icon-font'; }</code></pre> </div> </div> <div class="example"> <div class="example-content"> <h3>SVG Icon</h3> <p>Lorem ipsum dolor consectetur amet nulla elit. Vivamus luctus urna sed urna ultricies. Vivamus luctus urna sed.</p> <a href="#" class="example-code-link">{}</a> </div> <div class="example-code"> <pre class="js"><code>anchors.options = { visible: 'always', icon: '' }; anchors.add('h3');</code></pre> <pre class="css"><code>.anchorjs-link { display: inline-block; background: url('img/hyperlink.svg') no-repeat; margin-left: 8px; width: 14px; height: 24px; }</code></pre> </div> </div> <div class="example"> <div class="example-content"> <h3>Base64 Icon</h3> <p>Lorem ipsum dolor consectetur amet nulla elit. Vivamus luctus urna sed urna ultricies. Vivamus luctus urna sed.</p> <a href="#" class="example-code-link">{}</a> </div> <div class="example-code"> <pre class="js"><code>anchors.options = { visible: 'always', placement: 'left', icon: '' }; anchors.add('h3');</code></pre> <pre class="css"><code>.anchorjs-link { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjIwcHgiIGhlaWdodD0iMTBweCIgdmlld0JveD0iMCAwIDIwIDEwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9ImxpbmsiIGZpbGw9IiNGRjUyMzEiPgogICAgICAgICAgICA8cGF0aCBkPSJNMTUsMCBMMTIuMzA0Njg3NSwwIEMxMy4yNDIxODc1LDAuNjI1IDE0LjEyMTA5MzgsMS43MzgyODEyNSAxNC4zOTQ1MzEyLDIuNSBMMTQuOTgwNDY4OCwyLjUgQzE2LjI1LDIuNSAxNy40ODA0Njg4LDMuNzUgMTcuNDgwNDY4OCw1IEMxNy40ODA0Njg4LDYuMjUgMTYuMjEwOTM3NSw3LjUgMTQuOTgwNDY4OCw3LjUgTDExLjIzMDQ2ODgsNy41IEMxMCw3LjUgOC43MzA0Njg3NSw2LjI1IDguNzMwNDY4NzUsNSBDOC43MzA0Njg3NSw0LjU1MDc4MTI1IDguODY3MTg3NSw0LjEyMTA5Mzc1IDkuMDgyMDMxMjUsMy43NSBMNi40MDYyNSwzLjc1IEM2LjMwODU5Mzc1LDQuMTYwMTU2MjUgNi4yNSw0LjU3MDMxMjUgNi4yNSw1IEM2LjI1LDcuNSA4LjczMDQ2ODc1LDEwIDExLjIzMDQ2ODgsMTAgTDE1LDEwIEMxNy41LDEwIDIwLDcuNSAyMCw1IEMyMCwyLjUgMTcuNSwwIDE1LDAgTDE1LDAgWiBNNS42MDU0Njg3NSw3LjUgTDUuMDE5NTMxMjUsNy41IEMzLjc1LDcuNSAyLjUxOTUzMTI1LDYuMjUgMi41MTk1MzEyNSw1IEMyLjUxOTUzMTI1LDMuNzUgMy43ODkwNjI1LDIuNSA1LjAxOTUzMTI1LDIuNSBMOC43Njk1MzEyNSwyLjUgQzEwLDIuNSAxMS4yNjk1MzEyLDMuNzUgMTEuMjY5NTMxMiw1IEMxMS4yNjk1MzEyLDUuNDQ5MjE4NzUgMTEuMTMyODEyNSw1Ljg3ODkwNjI1IDEwLjkxNzk2ODgsNi4yNSBMMTMuNTkzNzUsNi4yNSBDMTMuNjkxNDA2Miw1LjgzOTg0Mzc1IDEzLjc1LDUuNDI5Njg3NSAxMy43NSw1IEMxMy43NSwyLjUgMTEuMjY5NTMxMiwwIDguNzY5NTMxMjUsMCBMNSwwIEMyLjUsMCAwLDIuNSAwLDUgQzAsNy41IDIuNSwxMCA1LDEwIEw3LjY5NTMxMjUsMTAgQzYuNzU3ODEyNSw5LjM3NSA1Ljg3ODkwNjI1LDguMjYxNzE4NzUgNS42MDU0Njg3NSw3LjUgTDUuNjA1NDY4NzUsNy41IFoiIGlkPSJTaGFwZSI+PC9wYXRoPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+") no-repeat; margin-top: 15px; height: 16px; width: 20px; }</code></pre> </div> </div> <div class="example"> <div class="example-content"> <h3>CSS Icon</h3> <p>Lorem ipsum dolor consectetur amet nulla elit. Vivamus luctus urna sed urna ultricies. Vivamus luctus urna sed.</p> <a href="#" class="example-code-link">{}</a> </div> <div class="example-code"> <pre class="js"><code>anchors.options = { visible: 'always', placement: 'left', icon: '' }; anchors.add('h3');</code></pre> <pre class="css"><code>/* See also: nicolasgallagher.com/pure-css-gui-icons */ .anchorjs-link { border-color: #FF5231 #FF5231 transparent; border-width: 15px 7px 6px; border-style: solid; margin-top: 10px; font-size: 22px; padding-right: 0 !important; }</code></pre> </div> </div> <div class="example"> <div class="example-content"> <h3>Emoji</h3> <p id="emoji">Lorem ipsum dolor consectetur amet nulla elit. Vivamus luctus urna sed urna ultricies. Vivamus luctus urna sed.</p> <a href="#" class="example-code-link">{}</a> </div> <div class="example-code"> <pre class="js"><code>anchors.options = { visible: 'always', placement: 'left', icon: '⚓' }; anchors.add('p');</code></pre> <pre class="css"><code>.anchorjs-link { margin-left: -1.8em !important; }</code></pre> </div> </div> <div class="example"> <div class="example-content"> <h3>Grunticon</h3> <p>Lorem ipsum dolor consectetur amet nulla elit. Vivamus luctus urna sed urna ultricies. Vivamus luctus urna sed.</p> <a href="#" class="example-code-link">{}</a> </div> <div class="example-code"> <pre class="js"><code>// Assuming you have set up // grunticon and you have a // grunticon class named // 'icon-grunticon-link'... anchors.options = { visible: 'always', class: 'icon-grunticon-link' icon: '' }; anchors.add('h3');</code></pre> <pre class="css"><code>.anchorjs-link { display: inline-block; margin-left: 0.375em; width: 0.375em; height: 20px; }</code></pre> </div> </div> </div> <h2 id="hover-examples" class="title">Hover examples</h2> <div class="hover-examples"> <div class="example"> <div class="example-content"> <h3>Basic Hover</h3> <p>Lorem ipsum dolor consectetur amet nulla elit. Vivamus luctus urna sed urna ultricies. Vivamus luctus urna sed.</p> <a href="#" class="example-code-link">{}</a> </div> <div class="example-code"> <pre class="js"><code>anchors.add('h3');</code></pre> </div> </div> <div class="example"> <div class="example-content"> <h3>Color Transition</h3> <p>Lorem ipsum dolor consectetur amet nulla elit. Vivamus luctus urna sed urna ultricies. Vivamus luctus urna sed.</p> <a href="#" class="example-code-link">{}</a> </div> <div class="example-code"> <pre class="js"><code>anchors.add('h3');</code></pre> <pre class="css"><code>.anchorjs-link:hover { color: #2500AD; } *:hover > .anchorjs-link { transition: color .25s linear; }</code></pre> </div> </div> <div class="example"> <div class="example-content"> <h3>Shift Out</h3> <p>Lorem ipsum dolor consectetur amet nulla elit. Vivamus luctus urna sed urna ultricies. Vivamus luctus urna sed.</p> <a href="#" class="example-code-link">{}</a> </div> <div class="example-code"> <pre class="js"><code>anchors.options.placement = 'left'; anchors.add('h3');</code></pre> <pre class="css"><code>.anchorjs-link { transition: all .25s linear; } *:hover > .anchorjs-link { margin-left: -1.125em !important; }</code></pre> </div> </div> <div class="example"> <div class="example-content"> <h3>Arrow</h3> <p>Lorem ipsum dolor consectetur amet nulla elit. Vivamus luctus urna sed urna ultricies. Vivamus luctus urna sed.</p> <a href="#" class="example-code-link">{}</a> </div> <div class="example-code"> <pre class="js"><code>anchors.options.icon = '# LINK'; anchors.add('h3');</code></pre> <pre class="css"><code>/* Based on http://codepen.io/corysimmons/pen/NPBXbe */ /* Vendor prefixes not included */ .anchorjs-link { position: relative; top: 4px; height: 36px; flex: 1; background: #FF5231; color: white; font-family: Helvetica, Arial, sans-serif; font-weight: 200; font-size: 1rem; margin-right: -6%; padding-right: 6%; padding-left: 42px !important; line-height: 38px; transition: all 0.5s ease; transform: translateX(100%); } .anchorjs-link::before { position: absolute; display: block; left: 0; width: 0; height: 0; content: ''; border: 18px solid #fdfdfd; /* Background color */ border-right-color: #FF5231; transition: all 0.5s ease; } h2 { display: flex; } *:hover > .anchorjs-link { transform: translateX(0); } *:hover > .anchorjs-link:hover { background: #FF806A; } *:hover > .anchorjs-link:hover::before { border-right-color: #FF806A; }</code></pre> </div> </div> <div class="example"> <div class="example-content"> <h3>Tooltip</h3> <p>Lorem ipsum dolor consectetur amet nulla elit. Vivamus luctus urna sed urna ultricies. Vivamus luctus urna sed.</p> <a href="#" class="example-code-link">{}</a> </div> <div class="example-code"> <pre class="js"><code>anchors.options = { icon: 'Permalink' }; anchors.add('h3');</code></pre> <pre class="css"><code>/* tooltip box */ .anchorjs-link:after { display: inline-block; transition: opacity .25s linear; font-family: Verdana, sans-serif; font-size: 0.75ex; font-weight: 100; padding: 0.5ex 1.5ex; background: #444; color: #fff; border-radius: 0.6ex; vertical-align: 0.8ex; } /* tooltip arrow */ .anchorjs-link:before { content: ''; display: inline-block; border-top: 0.3ex solid transparent; border-right: 0.5ex solid #444; border-bottom: 0.3ex solid transparent; vertical-align: 0.35ex; } .anchorjs-link:hover:after { background-color: #666; } .anchorjs-link:hover:before { border-right-color: #666; }</code></pre> </div> </div> </div> <footer class="footer"><p><small>Made by <a href="http://www.bryanbraun.com">Bryan</a>. You should <a href="https://twitter.com/intent/tweet?text=Hi%20%40BryanEBraun%2C%20">say hi</a> sometime. 👋</small></p></footer> <a href="https://github.com/bryanbraun/anchorjs"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://github-camo.global.ssl.fastly.net/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"></a> </section> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="anchor.js"></script> <script src="scripts.js"></script> <script> anchors.add('.main > h2, .main > h3, .main > section > h2, .main > section > h3').remove('.used-by-label'); var ex1 = new AnchorJS({ visible: 'always' }); ex1.add('.examples .example:nth-child(1) h3, .preview-examples .example:nth-child(1) h3'); var ex2 = new AnchorJS({ placement: 'left', visible: 'always' }); ex2.add('.examples .example:nth-child(2) h3'); var ex3 = new AnchorJS({ icon: '¶', visible: 'always', placement: 'left' }); ex3.add('.examples .example:nth-child(3) p, .preview-examples .example:nth-child(2) p'); var ex4 = new AnchorJS({ icon: '#', visible: 'always' }); ex4.add('.examples .example:nth-child(4) h3'); var ex5 = new AnchorJS({ icon: '§', visible: 'always', placement: 'left' }); ex5.add('.examples .example:nth-child(5) h3'); var ex6 = new AnchorJS({ icon: '❡', visible: 'always' }); ex6.add('.examples .example:nth-child(6) p'); var ex7 = new AnchorJS({ icon: '# LINK', visible: 'always' }); ex7.add('.examples .example:nth-child(7) h3'); var ex8 = new AnchorJS({ icon: '', visible: 'always', placement: 'left' }); ex8.add('.examples .example:nth-child(8) h3'); var ex9 = new AnchorJS({ visible: 'always', placement: 'left' }); ex9.add('.examples .example:nth-child(9) h3'); var ex10 = new AnchorJS({ visible: 'always', class: 'ajs-10', icon: '\uf0c1' }); ex10.add('.examples .example:nth-child(10) h3'); var ex11 = new AnchorJS({ visible: 'always', icon: '' }); ex11.add('.examples .example:nth-child(11) h3'); var ex12 = new AnchorJS({ visible: 'always', placement: 'left', icon: '' }); ex12.add('.examples .example:nth-child(12) h3'); var ex13 = new AnchorJS({ visible: 'always', placement: 'left', icon: '' }); ex13.add('.examples .example:nth-child(13) h3'); var ex14 = new AnchorJS({ visible: 'always', placement: 'left', icon: '⚓' }); ex14.add('.examples .example:nth-child(14) p'); var ex15 = new AnchorJS({ visible: 'always', class: 'icon-grunticon-link', icon: '' }); ex15.add('.examples .example:nth-child(15) h3'); var hovEx1 = new AnchorJS(); hovEx1.add('.hover-examples .example:nth-child(1) h3'); var hovEx2 = new AnchorJS(); hovEx2.add('.hover-examples .example:nth-child(2) h3'); var hovEx3 = new AnchorJS({ placement: 'left' }); hovEx3.add('.hover-examples .example:nth-child(3) h3'); var hovEx4 = new AnchorJS({ icon: '# LINK' }); hovEx4.add('.hover-examples .example:nth-child(4) h3'); var hovEx5 = new AnchorJS({ icon: 'Permalink' }); hovEx5.add('.hover-examples .example:nth-child(5) h3'); </script> <script src="//cdn.jsdelivr.net/prism/1.5.1/prism.js"></script> </body> </html>