JavaScript Web Page Mini-Map Plugin pagemap

Add-ons

2026-07-25 23:05 8 次浏览 • 0 次下载 5.5KB

Plugin description: A JavaScript mini-map plugin for web pages that helps you quickly navigate to your desired location.

pagemap

pagemap.js is a canvas-based mini navigation panel plugin for web pages. It creates a mini navigation panel similar to the one on the right side of the Sublime Text editor.

Usage

Include it in your HTML file.

1	`<script` `type="text/javascript"` `src="path/to/pagemap.min.js"></script>`

HTML Structure

Add a <canvas> element to the page.

1	`<canvas` `id='map'></canvas>`

CSS Styles

Use CSS to position the <canvas> element in the upper-right corner of the page.

#map {
    position: fixed;
    top: 0;
    right: 0;
    width: 200px;
    height: 100%;
    z-index: 100;
}

Initialize the Plugin

pagemap(document.querySelector('#map'), {
    viewport: null,
    styles: {
        'header,footer,section,article': rgba(0,0,0,0.08),
        'h1,a': rgba(0,0,0,0.10),
        'h2,h3,h4': rgba(0,0,0,0.08)
    },
    back: rgba(0,0,0,0.02),
    view: rgba(0,0,0,0.05),
    drag: rgba(0,0,0,0.10),
    interval: null
});