滚动到网页上的顶部功能

时间:2013-06-24 17:32:38

标签: javascript scroll

您好我有一个脚本我用来搜索页面上的文字,然后将它们带到页面顶部。我的问题是我有一个固定标题,突出显示的结果在固定标题下滚动。如何修复脚本以不从顶部向下移动到300 px,以便结果在页面中间突出显示?

这是我的代码:

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();

1 个答案:

答案 0 :(得分:0)

window.scrollTo(0,300);会将页面从顶部滚动到300px。