在JavaScript中滚动到文本（而不是元素）

Question

有什么方法可以滚动到JavaScript中文本节点中的特定位置？我不只是指滚动到文本节点的顶部，但实际上确保特定的单词是可见的。

[编辑]

谢谢你的答案，但是这并不完全符合我要找的。这是一个从JavaScript执行的搜索，用于查找可能发生在页面任意位置的任意字符串。当我制作页面时，我不能只制作一个定位标记。有没有办法在预先存在的页面的文本节点中滚动到特定范围的文本？

Answer 1

使用锚标记是旧的滚动方式，但对于滚动到文本中某个点的目的而言，它仍然可靠。您可以使用提供的HTML解决方案或JavaScript，它们都使用锚标签。然后，点击一个链接或一个按钮，该链接或按钮使用以hash结尾的href属性加上一些文本，在本例中为“#done”。当您点击链接或按钮时，页面将滚动到页面上指定文本的锚点标签的确切位置。

第二个按钮使用JavaScript滚动x和y像素坐标，在这种情况下，该坐标可以工作，因为y坐标的慷慨值可以滚动1000像素或页面的末尾，以先到者为准。

第三个按钮还使用JavaScript进行相对滚动，这对于获取正确性更具挑战性。这里按钮滚动到“蓝色”这个词出现的地方。滚动一页的偏移量是不够的。我不得不在全屏视图中滚动才能正常工作。

最后一个按钮使用jQuery和动画效果来创建一个平滑滚动到“蓝色”。但是，要在此页面上工作，需要调整与目标顶部偏移相关的参数。

function gotodone(){ 
 
location.href = "#done"; 
 
} 
 

 
function Scroll2End(){ 
 
window.scrollTo(0, 1000); 
 
} 
 

 
function relScroll(){ 
 
window.scrollBy(0,(window.innerHeight * 3) + 30); 
 
} 
 

 
function smooth2blue(){ 
 
$('html, body').animate({ 
 
    scrollTop: $("#blu").offset().top - 190 
 
}, 2000); 
 
}

span { 
 

 
color:#f0f; 
 
} 
 

 
span.blue { 
 
    color:blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="content"> 
 
<a href="#done">Goto done</a> 
 
<button onclick="gotodone()">goto done</button> 
 
<button onclick="Scroll2End()">go2end</button> 
 
<button onclick="relScroll()">go2blue</button> 
 
<button onclick="smooth2blue()">goSmooth2blue</button> 
 
<p>The rain in Spain stays mainly in the plain. One.</p> 
 
<p>The rain in Spain stays mainly in the plain. One.</p> 
 
<p>The rain in Spain stays mainly in the plain. One.</p> 
 
<p>The rain in Spain stays mainly in the plain. One.</p> 
 
<p>The rain in Spain stays mainly in the plain. One.</p> 
 
<p>The rain in Spain stays mainly in the plain. One.</p> 
 
<p>The rain in Spain stays mainly in the plain. One.</p> 
 
<p>The rain in Spain stays mainly in the plain. One.</p> 
 
<p>The rain in Spain stays mainly in the plain. One.</p> 
 
<p>The rain in Spain stays mainly in the plain. One.</p> 
 

 
<p>The rain in Spain stays mainly in the plain. One.</p> 
 
<p>The rain in Spain stays mainly in the plain. One.</p> 
 
<p>The rain in Spain stays mainly in the plain. One.</p> 
 
<p>The rain in Spain stays mainly in the plain. One.</p> 
 
<p>The rain in Spain stays mainly in the plain. One.</p> 
 
<p>The rain in Spain stays mainly in the plain. One.</p> 
 
<p>The rain in Spain stays mainly in the plain. One.</p> 
 
<p>The rain in Spain stays mainly in the plain. One.</p> 
 
<p>The rain in Spain stays mainly in the plain. One.</p> 
 
<p>The rain in Spain stays mainly in the plain. One.</p> 
 

 
<p>The rain in Spain stays mainly in the plain. One.</p> 
 
<p>The rain in Spain stays mainly in the plain. One.</p> 
 
<p>The rain in Spain stays mainly in the plain. One.</p> 
 
<p>The rain in Spain stays mainly in the plain. One and <span id="blu" class="blue">blue</span>.</p> 
 
<p>The rain in Spain stays mainly in the plain. One.</p> 
 
<p>The rain in Spain stays mainly in the plain. One.</p> 
 
<p>The rain in Spain stays mainly in the plain. One.</p> 
 
<p>The rain in Spain stays mainly in the plain. One.</p> 
 
<p>The rain in Spain stays mainly in the plain. One.</p> 
 
<p>The rain in Spain stays mainly in the plain. One and <a id="done"><span>done</span>.</a></p>

更多信息重新滚动：此discussion这article。