こんにちは、ページ上の単語を検索してページの上部に表示するために使用しているスクリプトがあります。私の問題は、固定ヘッダーがあり、強調表示された結果が固定ヘッダーの下にスクロールすることです。スクリプトを上に移動するのではなく、上から 300 ピクセル下に移動して、結果がページの途中で強調表示されるようにするにはどうすればよいですか?
これが私のコードです：
inPageSearch = function () {
document.getElementsByClassName = function (cl) {
var retnode, myclass, elem, classes;
retnode = [];
myclass = new RegExp('\\b' + cl + '\\b');
elem = this.getElementsByTagName('*');
for (var i = 0, ii = elem.length; i < ii; i++) {
classes = elem[i].className;
if (myclass.test(classes)) retnode.push(elem[i]);
}
return retnode;
};
elemTop = function (elem) {
return elem.top || elem.pixelTop || elem.offsetTop || 0;
};
search = function (str) {
nodewalk = function (node, str) {
var re, m, s, r, frag, sp;
for (var i = 0; i < node.length; i++) {
if (node[i].hasChildNodes() && 'SCRIPT' !== node[i].nodeName) nodewalk(node[i].childNodes, str);
re = new RegExp(str, 'ig');
if (3 === node[i].nodeType) {
m = node[i].nodeValue.match(re);
s = node[i].nodeValue.split(re);
frag = document.createDocumentFragment();
if (m !== null) {
frag.appendChild(document.createTextNode(s[0]));
for (var j = 0, jj = m.length; j < jj; j++) {
sp = document.createElement('span');
sp.appendChild(document.createTextNode(m[j]));
sp.className = 'found';
frag.appendChild(sp);
frag.appendChild(document.createTextNode(s[j + 1]));
}
node[i].parentNode.replaceChild(frag, node[i]);
i += jj * 2;
}
}
}
};
nodewalk(document.getElementsByTagName('body')[0].childNodes, str);
};
clearfound = function (node) {
var txt = node.previousSibling.nodeValue + node.firstChild.nodeValue + node.nextSibling.nodeValue;
node.parentNode.removeChild(node.nextSibling);
node.parentNode.removeChild(node.previousSibling);
node.parentNode.replaceChild(document.createTextNode(txt), node);
};
var d, F, fld, inp, b1, b2, b3;
d = document.createElement("div");
d.id = 'searchbox';
F = document.createElement("form");
fld = document.createElement("fieldset");
inp = document.createElement("input");
inp.type = 'text';
inp.id = 'search';
fld.appendChild(inp);
b1 = document.createElement("input");
b1.type = 'button';
b1.id = 'search1';
b1.value = 'Find';
b1.title = 'Find all and jump to first';
fld.appendChild(b1);
b2 = document.createElement("input");
b2.type = 'button';
b2.id = 'search2';
b2.value = 'Find Next';
b2.title = 'Jump to next found element';
fld.appendChild(b2);
b3 = document.createElement("input");
b3.type = 'button';
b3.id = 'searchx';
b3.value = 'X';
b3.title = 'Close in page search';
fld.appendChild(b3);
F.appendChild(fld);
d.appendChild(F);
document.getElementsByTagName('body')[0].appendChild(d);
document.getElementById('search1').onclick = function () {
var nodes = document.getElementsByClassName('found');
for (var i = nodes.length - 1; i >= 0; i--) clearfound(nodes[i]);
search(document.getElementById('search').value);
window.scrollTo(0, elemTop(document.getElementsByClassName('found')[0]));
return false;
};
document.getElementById('search2').onclick = function () {
var nodes = document.getElementsByClassName('found');
clearfound(nodes[0]);
window.scrollTo(0, elemTop(document.getElementsByClassName('found')[0]));
return false;
};
document.getElementById('searchx').onclick = function () {
var nodes = document.getElementsByClassName('found');
for (var i = nodes.length - 1; i >= 0; i--) clearfound(nodes[i]);
document.getElementById('searchbox').style.display = 'none';
setTimeout(function () {
document.getElementsByTagName('body' [0].removeChild(document.getElementById('searchbox'));
}, 5);
};
};
inPageSearch();