Question

有没有办法滚动到JavaScript中文本节点中的特定位置？我不仅仅意味着滚动到文本节点的顶部，而是实际确保特定的单词是可见的。

[编辑]

感谢您的回答，但这不是我想要的。这是从JavaScript执行的搜索，用于可能出现在页面中任何位置的任意字符串。我制作页面时不能只制作锚标签。有没有办法滚动到预先存在的页面中文本节点内的特定文本范围？

Answer 1

使用锚标记是一种古老的滚动方式，但为了滚动到文本中的某个点，它仍然是可靠的。您可以使用提供的HTML解决方案或JavaScript，两者都使用锚标记。然后，可以单击链接或使用href属性的按钮，该href属性以哈希加上一些文本结尾，在这种情况下是＃34;＃done＆＃34;。当您单击链接或按钮时，页面将滚动到页面上指示文本的锚标记的确切位置。

第二个按钮使用JavaScript滚动x和y像素坐标，在这种情况下，因为y坐标的大小值可以滚动1000像素或页面末尾，以先到者为准。< / p>

第三个按钮也使用JavaScript进行相对滚动，这对于更好的方法来说更具挑战性。这里按钮滚动到单词＆＃34; blue＆＃34;进入视野。滚动一页的偏移量证明是不够的。当不在全屏视图中时，我必须使滚动值增加三倍以上。

最后一个按钮使用jQuery和动画效果创建一个平滑滚动到＆＃34;蓝色＆＃34;。但是，要使其在此页面上运行，需要调整与目标顶部的偏移量相关的参数。

＆＃13;

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

＆＃13;

span {

color:#f0f;
}

span.blue {
  color:blue;
}

＆＃13;

<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>

＆＃13;

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

滚动到JavaScript

1 个答案: