在页面上搜索单词并平滑滚动

Question

我的客户希望在特定页面上添加一个搜索框，以允许其用户搜索问题并滚动到该文本。这样他就更容易将客户引导到常见问题解答问题的正确部分。

搜索关键字“订单”后，功能滚动并突出显示页面上的“订单”，但下拉菜单停止工作，我们必须刷新页面才能从头开始搜索。 我正在寻找一种功能，它可以流畅地滚动并且不必刷新页面来搜索另一个关键字。

关于如何实现这一点的任何建议？

<input type="text" id="search-term" />
<input type="submit" id="search-button" value="search" />


function searchAndHighlight(searchTerm, selector) {
    if(searchTerm) {
       // var wholeWordOnly = new RegExp("\\g"+searchTerm+"\\g","ig"); //matches whole word only
        //var anyCharacter = new RegExp("\\g["+searchTerm+"]\\g","ig"); //matches any word with any of search chars characters
        var selector = selector || ".faq" ;  //use body as selector if none provided
        var searchTermRegEx = new RegExp(searchTerm,"ig");
        var matches = $(selector).text().match(searchTermRegEx);
        if(matches) {
                $('.highlighted').removeClass('highlighted'); //Remove old search highlights
                $(selector).html($(selector).html()
                   .replace(searchTermRegEx, "<span class='highlighted'>"+searchTerm+"</span>"));
            if($('.highlighted:first').length) {             //if match found, scroll to where the first one appears
                $(window).scrollTop($('.highlighted:first').offset().top);
            }
            return true;
        }
    }
    return false;
}

$(document).ready(function() {
    $('#search-button').on("click",function() {
        if(!searchAndHighlight($('#search-term').val())) {
            alert("No results found");
        }
    });
}); 

Answer 1

这对我有用：

// instead of: $(window).scrollTop($('.highlighted:first').offset().top);
// use this:
$('.highlighted:first')[0].scrollIntoView();