通过单击按钮从上到下滚动到搜索的单词

【问题标题】：scroll to searched word from top to bottom with button click通过单击按钮从上到下滚动到搜索的单词
【发布时间】：2016-03-19 20:51:21
【问题描述】：

当我点击向下按钮时，我想一一滚动到搜索的单词。实现代码请见Fiddle

$('#searchfor').keypress(function(){
  var page = $('#all_text');
  var pageText = page.text().replace("<span>","").replace("</span>");
  var searchedText = $('#searchfor').val();
  var theRegEx = new RegExp("("+searchedText+")", "igm");    
  var newHtml = pageText.replace(theRegEx ,"<span>$1</span>");
  page.html(newHtml);
});

【问题讨论】：

我建议您查看这个 Angular 简介，使用它您可以创建（以及许多其他内容）搜索框，搜索内容并在 keydown 上返回结果，而无需单击按钮 youtube.com/watch?v=TRrL5j3MIvo

标签： javascript jquery html css

【解决方案1】：

看这个例子：http://jsfiddle.net/kevalbhatt18/ju6xxwvb/13/

我用了来自Search and Highlight in jQuery的js

并写入按钮登录

var find = function(results, type, counter, adjPx, $el) {
    if (results.length > 0) {
        if (type === 'next') {
            if (counter > 0 && results.length == counter) {
                counter = 0;
            }
        } else if (type === 'prev') {
            if (counter < 0) {
                counter = results.length - 1;
            } else if (counter === results.length) {
                counter = counter - 2;
            }
        }
        results.removeClass("active");
        $(results[counter]).addClass("active");
        if ($el) {
            $('html,body').animate({
                scrollTop: $(results[counter]).offset().top - adjPx
            }, 100);
        } else {
            $el.animate({
                scrollTop: $(results[counter]).offset().top - adjPx
            }, 100);
        }

        counter = (type === 'prev') ? counter - 1 : counter + 1;
    }
    return counter;
};

【讨论】：