Question

存在类似的问题，但并不完全。这也很容易。

说我有一个大页面充满了Lorem Ipsum的东西，没有div或p或其他任何＆lt;＆gt; - 不想要它们因为文本也是用纯文本编辑器来解决的，所以我最多只需要带有br的纯文本。然而，为了分开部分，我使用重复的字符串，如<br>------------------<br>。什么是一个简单的JS代码（如果可能的话没有jQuery）在页面或div上找到此字符串的第1，第2，第3等出现，然后以它出现在页面底部的方式跳转到它，不是顶部。我计划在我的导航中使用它，在链接到页面特定部分的导航元素上使用addEventListener，可以通过此<br>------------------<br>字符串找到。非常感谢你。

Answer 1

我使用了JavaScript的Element.prototype.scrollIntoView函数，如下所示：

document.getElementById("holder").innerHTML = document.getElementById("holder").innerHTML.replace(/------------------/g, "<span class='sections-seper'>------------------</span>");

var choice = parseInt(prompt("Which section would you like to go to?", "Number"));
document.getElementsByClassName("sections-seper")[(choice - 1)].scrollIntoView(true);

#holder {
  font-size: 25px;
}

<div id='holder'>
------------------
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sodales dolor velit, in accumsan diam auctor et. Cras malesuada dui sem, non ultrices purus tristique eu. Aenean eu nunc eu lacus tincidunt aliquam. Etiam eget ex libero. Pellentesque et tortor a neque dictum maximus ac eu metus. Nunc laoreet justo in purus lobortis interdum eu sit amet dui. Curabitur et odio in lacus pellentesque porta.
------------------
Suspendisse imperdiet justo vel sapien commodo consequat. Mauris pharetra vulputate bibendum. Vivamus fringilla porta lorem, et tincidunt urna tincidunt nec. Integer lobortis, erat non convallis sagittis, mauris sapien venenatis ligula, eu facilisis est dolor congue odio. Curabitur at diam et sem semper eleifend ac vitae lacus. Vivamus a aliquam nunc, in fringilla risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque aliquam libero massa, ut pharetra purus ullamcorper ut. Nullam felis leo, finibus sed justo ac, feugiat interdum libero. Cras accumsan bibendum lectus. Cras sollicitudin, augue at fringilla elementum, nulla orci porta massa, ut condimentum lacus massa in elit. Aliquam ut urna ultrices, suscipit metus ac, aliquam mauris.
------------------
Maecenas ac gravida purus. Sed sem nisi, accumsan nec placerat eu, luctus ut nunc. Proin et hendrerit quam. Maecenas sapien orci, pharetra ut diam non, tristique finibus nisl. Curabitur venenatis viverra euismod. Proin vel lacus eu tortor fringilla porttitor eget eget quam. Sed eu rutrum enim. Donec sit amet vestibulum urna, eu cursus eros.
</div>

Javascript代码在页面上查找文本并跳转到它

1 个答案: