Scroll to text (not element) in JavaScript

Question

Is there any way to scroll to a particular place in a text node in JavaScript? I don't just mean scrolling to the top of the text node, but actually making sure that specific words are visible.

[edit]

Thank you for the answers, but this is not quite what I'm looking for. This is a search being performed from JavaScript for an arbitrary string that might occur anywhere in the page. I can't just make an anchor tag when I make the page. Is there any way to scroll to a particular range of text within a text node in a pre-existing page?

Answer 1

Making use of the anchor tag is an old way of scrolling, but it still is reliable for the purpose of scrolling to a certain point in the text. You can use either the HTML solution provided or the JavaScript, both of which make use of an anchor tag. Then one either clicks a link or a button that makes use of a href attribute terminating in a hash plus some text, which in this case is "#done". When you click the link or the button, the page will scroll to exactly where the anchor tag is for the indicated text on the page.

The second button uses JavaScript to scroll by x and y pixel coordinates, which in this case works because the of a generous value for the y coordinate which scrolls by 1000 pixels or to the end of the page, whichever comes first.

The third button also uses JavaScript with relative scrolling which is more challenging to get right. Here the button scrolls to the point where the word "blue" comes into view. Scrolling by an offset of one page turned out to be insufficient. I had to more than triple that value for the scrolling to work right when not in full screen view.

The last button uses jQuery and an animation effect to create a smooth scroll to "blue". However, to get it work on this page required adjusting a parameter related to the offset from the target's top.

 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> 

More info re scrolling: this discussion and this article .