$(document).ready(function() {
// make a link out of any <sup> with class .footnoted
$('.footnoted').each(function(i){
var superscript = i+1;
$(this).html('<a>[' + superscript + ']</a>');
});
// give <sup class="footnoted"> an id to scroll back to
$('.footnoted').each(function(i){
this.id = "reading-position-"+(i+1);
});
// tell the superscripts where to go
$('.footnoted a').each(function(i){
this.href = "#footnote-"+(i+1);
});
// set a target for the superscripts to scroll to
// if you're not using a list for your footnotes, change li to the correct selector
$('#footnotes li').each(function(i){
this.id = "footnote-"+(i+1);
});
// add return to reading position link at the end of the footnote
$('#footnotes li').append('<span class="return-to-reading footnoted" style="display:none;"><a> ↑ 元の場所に戻る</a></span>');
// give the return to position url an href of the target ID
$('#footnotes span a').each(function(i){
this.href = "#reading-position-"+(i+1);
});
// make a back to top link at the end of your footnotes
// if you're not using a list for your footnotes, change li to the correct selector
$('#footnotes li').last().after('<li id="back-to-top"><a>↑ 上へ戻る</a></li>');
// scroll back to the top
$('#back-to-top').click(function() {
$("html, body").animate({ scrollTop: 0 }, "fast");
});
$('.blah a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top - 20
}, 500, 'swing', function () {
window.location.hash = target;
});
});
// smooth scroll between reading position and footnotes
$('.footnoted a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top - 20
}, 500, 'swing', function () {
window.location.hash = target;
});
// remove class and link to previous reading position from other <li> if you scrolled to a footnote previously
$('.current-footnote span').remove();
$('#footnotes li').removeClass('current-footnote');
// add return to reading position link and give the current footnote a class for additional styles
$(target).addClass('current-footnote');
$('.current-footnote span').css('display', 'inline');
});
});
body {
font-family: helvetica;
}
.wrapper {
margin: 100px auto;
max-width: 640px;
}
p {
font-size: 14px;
line-height: 1.5;
}
a {
text-decoration: none;
}
ol {
margin-top:450px;
margin-bottom:450px;
border-top: 1px solid black;
padding: 20px 0;
}
li {
margin-bottom: 10px;
font-size: 12px;
line-height: 1.6;
}
sup.footnoted {
vertical-align: super;
}
sup.footnoted a {
color: red;
font-family: inherit;
font-size: 90%;
margin-left: .2em;
}
#back-to-top {
cursor: pointer;
list-style-type: none;
text-indent: -16px;
}
<h1>東京</h1>
<p>現在（2010年代時点）、国際連合の統計によると、東京は世界最大のメガシティと評価されており、川崎、横浜などとともに世界最大の人口を有する都市圏を形成している<sup class="footnoted"></sup>。都市単位の経済規模(GDP)ではニューヨークを凌ぎ、世界最大である<sup class="footnoted"></sup>。2012年、アメリカのシンクタンクが公表したビジネス・人材・文化・政治などを対象とした総合的な世界都市ランキングにおいて、ニューヨーク、ロンドン、パリに次ぐ世界第4位の都市と評価された<sup class="footnoted"></sup>。
</p>
<p>
「東京」の地名は、1868年9月（慶応4年（明治元年）7月）に出された江戸ヲ称シテ東京ト為スノ詔書により、江戸の町奉行支配地域を管轄する東京府が設置されたことに始まる。
江戸は東京と称することになったが、読み方については根拠となるような法令が出たわけでもなかった。「とうきやう」（呉音）が正規に使われたが、明治20年代頃までは「とうけい」（漢音）も混在して用いられることも少なくなかった。日刊新聞の発達により人々が情報を共有する機会が広がり、第1期国定国語教科書で「東京」の振り仮名が「トーキョー」と表記され（棒引き仮名遣い）、混在はなくなった。一方、昭和初期までは「東亰」という表記も混用されていた<sup class="footnoted"></sup>。この「亰」という文字は「京」の俗字である。「亰」を使ったのは、中国の東京（Dongjing、ドンジン）との混同を防ぐためともいわれるが、後に同じ字となった。された。</p>
<ol id="footnotes">
<li>国際連合の統計による世界の都市部の人口</li>
<li>プライスウォーターハウスクーパースによる都市のGDP</li>
<li>2012 Global Cities Index and Emerging Cities Outlook (2012年4月公表)</li>
<li>鈴木理生『東京の地名がわかる事典』日本実業出版社、2002年2月、P19。</li>
</ol>