ページ内のアンカーリンクを検索し、当該箇所にマーカーを付与し、リンク一覧を出力します。
今はオフライン環境でも動くように、すべてインラインで記述していますが、いずれCSSとJSを外部ファイル化したいので、少し無駄の多いソースになってます。
主な機能
- ページ内のアンカーリンクを検索します。
- アンカーリンクにマーカーを付与します。
- 色付けは、リンクの先がある場合は「赤」、javascriptの場合は「青」、指定がない場合は「緑」が着色されます。
- 画面下に抽出したリンクの一覧が表示されます。
- 表示されたURLをクリックすると当該箇所にアンカージャンプします。
- リンクにマウスオーバー中は、ページ内の等が箇所が「黒」に着色されます。
- 別ウィンドウ（_blank等）を指定している場合は、リンクの先頭に「別ウィンドウ」と表示されます。
- hrefが指定されていない場合は、「空白と表示されます。」
- 一覧表示の上部のタブをクリックすると開閉できます。
- 追加(4/27)：マーキングしたリンクにNo.を表示
COMPRESS&encodeURI済みソース
javascript:(function()%7Bvar%20a=%5B%5D;var%20d=document;var%20b=d.getElementsByTagName('body')%5B0%5D;var%20css='.hs-start%7Bpadding-bottom:50px;%7D'+'.hs-vw%7Bposition:fixed;%20z-index:5999999999;%20bottom:0;%20width:100vw;%20border-right:%201px%20solid%20#bbb;%20background-color:#efefef;%20box-shadow:0px%2015px%2010px%20-10px%20%20rgba(0,0,0,0.3);%20transition:%20.5s%7D'+'.hs-in%7B%20font-size:12px;%20height:0;%20padding:0%202em;%20overflow-y:scroll;%20box-sizing:border-box%7D'+'.hs-open.hs-start%7Bpadding-bottom:350px;%7D'+'.hs-open%20.hs-vw%7B%7D'+'.hs-open%20.hs-in%7Bheight:300px;%7D'+'.hs-open%20a%7Bcolor:#222;%20text-decoration:%20underline;%7D'+'.hs-scope%7Bposition:relative;%20display:inline-block%20!important;%7D'+'.hs-scope%7Bposition:relative;%20display:inline-block%20!important;%7D'+'.hs-wrap%7Bposition:absolute;%20display:block%20!important;%20top:0%20!important;%20z-index:%2099999%20!important;%20background:none%20!important;%20left:0%20!important;%20width:100%25%20!important;%20height:100%25%20!important;%20border:%203px%20solid%20#de4040;%20box-sizing:border-box%7D'+'.hs-wrap%20i%7Bposition:%20absolute;%20top:%20-3px;%20left:%20-3px;display:%20inline-block%20!important;%20padding:0%20.5em;%20background:#de4040;%20color:%20#000;%20font-size:%209px;%20font-family:%20%5C'Verdana%5C';font-style:%20normal;%20font-weight:%20normal;%20line-height:%201em;%20white-space:%20nowrap%7D'+'.hs-block%7Bpadding:.5em;%20margin:0;%20background-color:#ddd%20box-sizing:border-box%7D'+'.hs-block:nth-child(2n)%7Bbackground-color:#fff%7D'+'.hs-block%20dt%7Bdisplay:inline-block;%20float:%20left;%20clear:%20both;%20width:3em;%20margin-right:%20-3em%7D'+'.hs-block%20dd%7Bdisplay:inline-block;%20padding-left:%203em%20%7D'+'.hs-addblank:before%20%7Bcontent:%20%5C'%E5%88%A5%E3%82%A6%E3%82%A3%E3%83%B3%E3%83%89%E3%82%A6%5C';%20color:%20#fff;%20background:%20#444;%20padding:%200%20.3em;%20margin-right:%201em;%20text-decoration:%20none%20!important;%7D'+'.hs-cl%7Bdisplay:block;%20position:relative;%20height:50px;%20background-color:%20#456;%20color:%20#fff;%20border-radius:%200%200%200%200;%7D'+'#hs-icon%7B%20display:%20block;%20position:%20absolute;%20top:%2050%25;%20left:%2050%25;%20width:%2020px;%20height:%204px;%20margin:%20-4px%200%200%20-11px;%20background:%20#fff;%20transition:%20.2s%7D'+'#hs-icon:before,%20#hs-icon:after%7B%20display:%20block;%20content:%20%22%22;%20position:%20absolute;%20visibility:visible;%20top:%2050%25;%20left:%200;%20width:%2020px;%20height:%204px;%20background:%20#fff;%20transition:%20.3s%7D'+'#hs-icon:before%7B%20margin-top:%20-11px%7D'+'#hs-icon:after%7B%20margin-top:%207px%7D'+'.hs-open%20#hs-icon%7Bbackground:%20transparent%7D'+'.hs-open%20#hs-icon:before,.hs-open%20#hs-icon:after%7Bmargin-top:%200%7D'+'.hs-open%20#hs-icon:before%7Btransform:rotate(-45deg)%7D'+'.hs-open%20#hs-icon:after%7Btransform:rotate(-135deg)%7D'+'.hs-onmouse%7Bborder:%205px%20solid%20#000%20!important;%7D'+'.hs-js%20.hs-wrap%7Bborder-color:%20#4040de%7D'+'.hs-js%20.hs-wrap%20i%7Bbackground:%20#4040de;%7D'+'.hs-empty%20.hs-wrap%7Bborder-color:%20#40de40%7D'+'.hs-empty%20.hs-wrap%20i%7Bbackground:%20#40de40;%7D';b.classList.add('hs-start');b.classList.add('hs-open');var%20e=d.getElementsByTagName('a');for(var%20i=0;i%3Ce.length;i++)%7Bvar%20id=%22hs-id-%22+(i+1);var%20hr=e%5Bi%5D.href;var%20ta=e%5Bi%5D.target;var%20al=e%5Bi%5D.alt;a%5Bi%5D=%5Bid,hr,ta,al%5D;if(hr==%22%22%7C%7Chr==undefined)%7Be%5Bi%5D.classList.add(%22hs-empty%22);a%5Bi%5D%5B1%5D=%22%22%7Delse%7Bif(hr.toLowerCase().indexOf(%22javascript%22)!=-1)e%5Bi%5D.classList.add(%22hs-js%22)%7Dvar%20ac=d.createElement('i');var%20ai=d.createElement('i');ac.classList.add(%22hs-wrap%22);ac.id=id;ac.classList.add(id);ai.innerText=(i+1);ac.appendChild(ai);e%5Bi%5D.classList.add(%22hs-scope%22);e%5Bi%5D.appendChild(ac)%7Dvar%20f=d.getElementsByClassName('hs-vw');if(f.length%3E0)%7Bfor(var%20i=0;i%3Cf.length;i++)%7Bif(f%5Bi%5D.parentNode)%7Bf%5Bi%5D.parentNode.removeChild(f%5Bi%5D)%7D%7D%7Delse%7Bvar%20s=d.createElement('style');s.innerHTML=css;b.appendChild(s)%7Dvar%20view_wrap=d.createElement('div');var%20view_inner=d.createElement('div');view_wrap.classList.add('hs-vw');view_inner.classList.add('hs-in');var%20close=d.createElement('i');close.classList.add('hs-cl');close.setAttribute('onclick',%22var%20e=document.getElementsByTagName('body')%5B0%5D;%20e.classList.toggle('hs-open')%22);close.innerHTML=%22%3Ci%20id='hs-icon'%3E%3C/i%3E%22;view_wrap.appendChild(close);view_wrap.appendChild(view_inner);b.appendChild(view_wrap);for(var%20i=0;i%3Ca.length;i++)%7Bvar%20dl=document.createElement('dl');var%20dt=document.createElement('dt');var%20dd=document.createElement('dd');var%20link=document.createElement('a');dl.classList.add('hs-block');link.classList.add('hs-link');dt.innerText=i+1;link.setAttribute('onclick',%22window.scroll(0,document.getElementById('%22+a%5Bi%5D%5B0%5D+%22').getBoundingClientRect().top);%22);link.setAttribute('onmouseenter',%22document.getElementById('%22+a%5Bi%5D%5B0%5D+%22').classList.add('hs-onmouse')%22);link.setAttribute('onmouseleave',%22document.getElementById('%22+a%5Bi%5D%5B0%5D+%22').classList.remove('hs-onmouse')%22);link.href=%22#%22+a%5Bi%5D%5B0%5D;link.alt=a%5Bi%5D%5B3%5D;link.innerText=(a%5Bi%5D%5B1%5D!=%22%22)?a%5Bi%5D%5B1%5D:%22%E7%A9%BA%E7%99%BD%22;switch(a%5Bi%5D%5B2%5D)%7Bcase%22%22:case%20undefined:case%22_self%22:break;default:link.classList.add('hs-addblank');break%7Ddl.appendChild(dt);dl.appendChild(dd);dd.appendChild(link);view_inner.appendChild(dl)%7D%7D)();
展開ソース
javascript
javascript: (function() {
var a = [];
var d = document;
var b = d.getElementsByTagName('body')[0];
//固有接頭語「hs」
var css = '.hs-start{padding-bottom:50px;}' +
'.hs-vw{position:fixed; z-index:5999999999; bottom:0; width:100vw; border-right: 1px solid #bbb; background-color:#efefef; box-shadow:0px 15px 10px -10px rgba(0,0,0,0.3); transition: .5s}' +
'.hs-in{ font-size:12px; height:0; padding:0 2em; overflow-y:scroll; box-sizing:border-box}' +
'.hs-open.hs-start{padding-bottom:350px;}' +
'.hs-open .hs-vw{}' +
'.hs-open .hs-in{height:300px;}' +
'.hs-open a{color:#222; text-decoration: underline;}' +
'.hs-scope{position:relative; display:inline-block !important;}' +
'.hs-scope{position:relative; display:inline-block !important;}' +
'.hs-wrap{position:absolute; display:block !important; top:0 !important; z-index: 99999 !important; background:none !important; left:0 !important; width:100% !important; height:100% !important; border: 3px solid #de4040; box-sizing:border-box}' +
'.hs-wrap i{position: absolute; top: -3px; left: -3px;display: inline-block !important; padding:0 .5em; background:#de4040; color: #000; font-size: 9px; font-family: \'Verdana\';font-style: normal; font-weight: normal; line-height: 1em; white-space: nowrap}' +
'.hs-block{padding:.5em; margin:0; background-color:#ddd box-sizing:border-box}' +
'.hs-block:nth-child(2n){background-color:#fff}' +
'.hs-block dt{display:inline-block; float: left; clear: both; width:3em; margin-right: -3em}' +
'.hs-block dd{display:inline-block; padding-left: 3em }' +
'.hs-addblank:before {content: \'別ウィンドウ\'; color: #fff; background: #444; padding: 0 .3em; margin-right: 1em; text-decoration: none !important;}' +
'.hs-cl{display:block; position:relative; height:50px; background-color: #456; color: #fff; border-radius: 0 0 0 0;}' +
'#hs-icon{ display: block; position: absolute; top: 50%; left: 50%; width: 20px; height: 4px; margin: -4px 0 0 -11px; background: #fff; transition: .2s}' +
'#hs-icon:before, #hs-icon:after{ display: block; content: ""; position: absolute; visibility:visible; top: 50%; left: 0; width: 20px; height: 4px; background: #fff; transition: .3s}' +
'#hs-icon:before{ margin-top: -11px}' +
'#hs-icon:after{ margin-top: 7px}' +
'.hs-open #hs-icon{background: transparent}' +
'.hs-open #hs-icon:before,.hs-open #hs-icon:after{margin-top: 0}' +
'.hs-open #hs-icon:before{transform:rotate(-45deg)}' +
'.hs-open #hs-icon:after{transform:rotate(-135deg)}' +
'.hs-onmouse{border: 5px solid #000 !important;}' +
'.hs-js .hs-wrap{border-color: #4040de}' +
'.hs-js .hs-wrap i{background: #4040de;}' +
'.hs-empty .hs-wrap{border-color: #40de40}'+
'.hs-empty .hs-wrap i{background: #40de40;}' ;
//起動フラグ
b.classList.add('hs-start');
b.classList.add('hs-open');
//Aタグ内 href 抽出
var e = d.getElementsByTagName('a');
for (var i = 0; i < e.length; i++) {
var id = "hs-id-" + (i + 1);
var hr = e[i].href;
var ta = e[i].target;
var al = e[i].alt;
a[i] = [id, hr, ta, al];
//クラス付与条件
if (hr == "" || hr == undefined) {
e[i].classList.add("hs-empty");
a[i][1] = "";
} else {
if (hr.toLowerCase().indexOf("javascript") != -1) e[i].classList.add("hs-js");
}
var ac = d.createElement('i');
var ai = d.createElement('i');
ac.classList.add("hs-wrap");
ac.id = id;
ac.classList.add(id);
ai.innerText=(i + 1);
ac.appendChild(ai);
e[i].classList.add("hs-scope");
e[i].appendChild(ac);
}
//既に表示している場合、一度削除する。
var f = d.getElementsByClassName('hs-vw');
if (f.length > 0) {
for (var i = 0; i < f.length; i++) {
if (f[i].parentNode) {
f[i].parentNode.removeChild(f[i]);
}
}
} else {
var s = d.createElement('style');
s.innerHTML = css;
b.appendChild(s);
}
//ソース出力先の生成
var view_wrap = d.createElement('div');
var view_inner = d.createElement('div');
view_wrap.classList.add('hs-vw');
view_inner.classList.add('hs-in');
//開閉ボタンの作成
var close = d.createElement('i');
close.classList.add('hs-cl');
close.setAttribute('onclick', "var e=document.getElementsByTagName('body')[0]; e.classList.toggle('hs-open')");
close.innerHTML = "<i id='hs-icon'></i>";
view_wrap.appendChild(close);
view_wrap.appendChild(view_inner);
b.appendChild(view_wrap);
//リンク一覧生成
for (var i = 0; i < a.length; i++) {
var dl = document.createElement('dl');
var dt = document.createElement('dt');
var dd = document.createElement('dd');
var link = document.createElement('a');
dl.classList.add('hs-block');
link.classList.add('hs-link');
dt.innerText = i + 1;
link.setAttribute('onclick', "window.scroll(0,document.getElementById('" + a[i][0] + "').getBoundingClientRect().top);");
link.setAttribute('onmouseenter', "document.getElementById('" + a[i][0] + "').classList.add('hs-onmouse')");
link.setAttribute('onmouseleave', "document.getElementById('" + a[i][0] + "').classList.remove('hs-onmouse')");
link.href = "#" + a[i][0];
link.alt = a[i][3];
link.innerText = (a[i][1] != "") ? a[i][1] : "空白";
switch (a[i][2]) {
case "":
case undefined:
case "_self":
break;
default:
link.classList.add('hs-addblank');
break;
}
dl.appendChild(dt);
dl.appendChild(dd);
dd.appendChild(link);
view_inner.appendChild(dl);
}
})();