検索機能を付けたｈｔｍｌにジャンプ機能を付けたい
いま、下のような状態で作成しています。
<html lung="ja">
<head>
<title>参考資料</title>
</head>
<body>
<!--search-->
<form method="get" action="" name="search">
<div class="search">キーワード検索（キーワード入力＞「Search」押下）・・・赤く反転したところが、該当箇所です<br />
<input id="search" name="search" size="20" style="width:300px" class="form" />
<input type="hidden" name="mySearch" value="" />
<input type="button" value="Search" class="button" onClick="javascript:doSearch()" />
</div>
</form>
<pre>
・
・
・
</pre>
<script type="text/javascript" language="javascript">
<!--
// フォント（font = "" などを指定する）
var fontName = "";
// フォントカラー（変更しない場合は、fontColor = "" とする）
var fontColor = "";
// フォントサイズ（単位はpx、変更しない場合は 0 を指定する）
var fontSize = 0;
// 太字（0：太字にしない、1：太字にする）
var isBold = 0;
// 斜体（0：斜体にしない、1：斜体にする）
var isItalic = 0;
// 下線（0：下線をつけない、1：下線をつける）
var isUnderline = 0;
// 背景色（変更しない場合は、backColor = "" とする）
var backColor = "#FF8080";
searchWordHighlighting();
function searchWordHighlighting() {
if (!document.body.createTextRange) return;
var range = document.body.createTextRange();
var searchStr = getSearchStr();
if (searchStr == "") return;
range.collapse(true);
while (range.findText(searchStr)){
if (fontName != "") range.execCommand("fontName", true, fontName);
if (fontSize > 0) range.execCommand("fontSize", true, fontSize);
if (fontColor != "") range.execCommand("foreColor", true, fontColor);
if (isBold != 0) range.execCommand("bold");
if (isItalic != 0) range.execCommand("italic");
if (isUnderline != 0) range.execCommand("underline");
if (backColor != "") range.execCommand("backColor", false, backColor);
range.collapse(false);
}
}
function getSearchStr() {
var urlStr = "" + window.location;
var baseStr = "mySearch=";
var index = urlStr.indexOf(baseStr);
if (index == -1) return "";
urlStr = urlStr.split("%25");
urlStr = urlStr.join("%");
return decodeURIComponent((urlStr.substring(index + baseStr.length)).replace("%25", "%"));
}
function doSearch() {
window.document.search.mySearch.value=encodeURIComponent(window.document.search.search.value);
window.document.search.submit();
}
//-->
</script>
</body>
</html>
これに「Serch」クリック後、該当箇所にジャンプする機能を付けたいです。
教えていただければ幸いです。
宜しくお願いします。
補足
ありがとうございます。 具体的なブックマークレットを書いていただけると助かります