jQuery scrollTo 文本或 scrollTo 字符串

Question

我有这样的字符串：

生命是区分物理实体的特征 来自那些不这样做的人的信号和自我维持过程，[1][2] 要么是因为这些功能已经停止（死亡），要么是因为它们 缺乏这样的功能，被归类为无生命的。[3][4][5]生物学 是一门研究生命的科学。

生命的最小连续单位称为有机体。有机体 由一个或多个细胞组成，进行新陈代谢，维持 体内平衡，可以生长，对刺激作出反应，繁殖，并通过 进化，适应他们的环境在连续几代人。 [1]一种 在生物圈中可以发现各种各样的生物体 地球，以及这些有机体共有的属性——植物、动物、 真菌、原生生物、古生菌和细菌——是一种碳基和水基 具有复杂组织和可遗传遗传的细胞形式 信息。

地球大约在 45.4 亿年前形成。最早的生命 地球上至少存在于 35 亿年前，[6][7][8] 古太古时代，当足够的地壳在 熔化的冥王。地球上生命的最早物理证据是 37亿年前变沉积岩中的生物石墨 在格陵兰岛西部发现[9] 和在格陵兰岛发现的微生物垫化石 在西澳大利亚发现 34.8 亿年前的砂岩。[10][11]然而，一些研究表明，生活在 地球可能有 XXXXXXXXX 更早开始，[12] 早在 42.5 亿 几年前根据一项研究，[13] 甚至更早，4.4 根据另一项研究，十亿年前。 [14]该机制由 尽管许多假设已经 已制定。自从出现以来，生活已经演变成各种各样的 形式，生物学家已将其分类为分类群的层次结构。生活 可以在各种条件下生存和茁壮成长。

虽然生命只在地球上得到证实，但许多人认为 外星生命不仅是合理的，而且很可能或 不可避免的。[15][16]太阳系中的其他行星和卫星有 被检查过曾经支持过简单生活的证据，并且 SETI等项目试图检测无线电传输 来自可能的外星文明。根据泛精论 假设，XXXXXXXXXX微观生命存在于整个宇宙中，并且是 由流星体、小行星和小行星分布。[17]

生命的意义——它的意义、起源、目的和终极 命运——是哲学和宗教的核心概念和问题。 哲学和宗教都提供了关于如何 生命关乎存在和意识，以及相关的问题 例如生活态度、目的、对一个或多个神的概念、灵魂或 来世。历史上不同的XXXXXXXXXXXXXcultures 已经广泛 解决这些问题的不同方法。

我有以下元素：

<input type="button" value="Prev" id="P" name="P">
<input type="button" value="Next" id="N" name="N">

和一个文本区域

<textarea id="enterAnyText"></textarea>

当用户点击该输入#P 时，页面应将scroll 转换为前一个XXXXXXXXX 或他们（用户）在textarea 中插入的任何文本，并带有不错的动画。

当用户点击该输入#N 时，页面应scroll 到下一个XXXXXXXXX 或他们（用户）在textarea 中插入的任何文本，并带有不错的动画。

animation 不应该太快，应该是流畅的。

我正在运行最新的jQuery 版本并且没有数据库。

文本是从不同的故事书中随机生成的...所以 XXXXXXX 可能表示他们想要在故事书中随机生成的 looong 文本中搜索的任何 word、string 或 text。

请注意：故事书保存在 .html 文件中，即 story1.html、story2.html.... 它们使用 jQuery.load() 加载到 divs 中

EDIT2：我们尝试使用即jQuery("p:contains(txt)")，但滚动到父p标签而不是文本或单词本身

类似的段落：

地球大约在 45.4 亿年前形成。最早的 地球上的生命至少存在于 35 亿年前，[6][7][8] 始太古代时代，当时有足够的地壳在 熔化的冥王。地球上生命的最早物理证据是 37亿年前变沉积岩中的生物石墨 在格陵兰岛西部发现[9] 和在格陵兰岛发现的微生物垫化石 在西澳大利亚发现 34.8 亿年前的砂岩。[10][11]然而，一些研究表明，生活在 地球可能有这样一段： 地球形成于大约 45.4 亿年前。地球上最早的生命存在于至少 35 亿年前，[6][7][8] 始太古代时代，当时有足够的地壳在 熔化的冥王。地球上生命的最早物理证据是 37亿年前变沉积岩中的生物石墨 在格陵兰岛西部发现[9] 和在格陵兰岛发现的微生物垫化石 在西澳大利亚发现 34.8 亿年前的砂岩。[10][11]然而，一些研究表明，生活在 地球可能有这样一段： 地球形成于大约 45.4 亿年前。地球上最早的生命存在于至少 35 亿年前，[6][7][8] 始太古代时代，当时有足够的地壳在 熔化的冥王。地球上生命的最早物理证据是 37亿年前变沉积岩中的生物石墨 在格陵兰岛西部发现[9] 和在格陵兰岛发现的微生物垫化石 在西澳大利亚发现 34.8 亿年前的砂岩。[10][11]然而，一些研究表明，生活在 地球可能有 XXXXXXXXX

将scroll 转至p，但不会转至XXXXXXXXXXX

任何建议都受到高度赞扬。

Answer 1

你可以这样做。

HTML

<p>Here is a paragraph</p>
</p>Here is another paragraph</p>

<input type="button" value="previous" id="previous" />
<input type="text" placeholder="enter a searchstring" />
<input type="button" value="next" id="next" />

请记住，此 HTML 实际上不会滚动，因为它可能比您的屏幕短很多。不要滚动，而是在下面的代码中添加一个控制台日志，以查看它从顶部指向正确的位置。

jQuery

​​>

// the following function will search for all 'tags' containing 'value' in DOM order
var working = false;
function searchWordsReturnOffsets(value, tags){
    // this will prevent the function from executing while its still in an execution cycle.
    if(working) return;
    else working = true;
    var all = [];
    $(tags).each(function(){
        if($(this).text().indexOf(value) >= 0){
            // temporarily wrap them in a findable object we can locate
            $(this).html($(this).html().replace(value,"<span class='searchvalue'>" + value + "</span>"));
            // lets do another foreach to find every instances' offset
            $(this).find("span.searchvalue").each(function(){
                all.push($(this).offset().top);
            });
            // remove the findable objects again
            $(this).html($(this).html().replace("<span class='searchvalue'>" + value + "</span>",value));
        }
    });
    return all;
}
$(document).ready(function(){
    var current = 0;
    var positions = [];
    $("#search").on("keyup", function(){
        // here we will keep track of the paragraphs and reset to the first
        positions = searchWordsReturnOffsets($(this).val(), "p");
        current = 0;
        $("body,html").animate({scrollTop : positions[current]});
    });
    $("#next").click(function(){
        if(positions[current + 1] != undefined){
            current++;
            $("body,html").animate({scrollTop : positions[current]});
        }
    });
    $("#previous").click(function(){
        if(positions[current - 1] != undefined){
            current--;
            $("body,html").animate({scrollTop : positions[current]});
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
var working = false;
function searchWordsReturnOffsets(value, tags){
    if(working) return;
    else working = true;
	var all = [];
	$(tags).each(function(){
		if($(this).text().indexOf(value) >= 0){
			$(this).html($(this).html().replace(value,"<span class='searchvalue'>" + value + "</span>"));
			 $(this).find("span.searchvalue").each(function(){
			        all.push($(this).offset().top);
			    });
			$(this).html($(this).html().replace("<span class='searchvalue'>" + value + "</span>",value));
		}
	});
    working = false;
	return all;
}

$(document).ready(function(){
	var current = 0;
	var positions = [];
    $("#search").on("keyup", function(){
    	positions = searchWordsReturnOffsets($(this).val(), "p");
    	current = 0;
        if(positions[current] != undefined){
          console.log(positions[current]);
        }
    });
    $("#next").click(function(){
    	if(positions[current + 1] != undefined){
    		current++;
            console.log(positions[current]);
    	}
    });
    $("#previous").click(function(){
    	if(positions[current - 1] != undefined){
    		current--;
            console.log(positions[current]);
    	}
    });
})
</script>

<p>Here is a paragraph</p>
<p>Here is another paragraph<br/>With a second line to see we get three results when searching 'ere'.</p>

<input type="button" value="previous" id="previous" />
<input type="text" placeholder="enter a searchstring" id="search" />
<input type="button" value="next" id="next" />

Answer 2

您可以使用:contains() 查找特定文本：

var target  = $( "div:contains('text to search for')" );

然后找到target的偏移量并滚动到它。

注意，:contains 会查找页面中文本的所有实例，因此您滚动到的可能会很有趣。