jQuery scrollTo text or scrollTo String

Question

I have this string like:

Life is a characteristic distinguishing physical entities having signaling and self-sustaining processes from those that do not,[1][2] either because such functions have ceased (death), or because they lack such functions and are classified as inanimate.[3][4][5] Biology is a science concerned with the study of life.

The smallest contiguous unit of life is called an organism. Organisms are composed of one, or more, cells, undergo metabolism, maintain homeostasis, can grow, respond XXXXXX to stimuli, reproduce and, through evolution, adapt to their environment in successive generations.[1] A diverse array of living organisms can be found in the biosphere of Earth, and the properties common to these organisms—plants, animals, fungi, protists, archaea, and bacteria—are a carbon- and water-based cellular form with complex organization and heritable genetic information.

The Earth was formed about 4.54 billion years ago. The earliest life on Earth existed at least 3.5 billion years ago,[6][7][8] during the Eoarchean Era when sufficient crust had solidified following the molten Hadean Eon. The earliest physical evidence for life on Earth is biogenic graphite in 3.7 billion-year-old metasedimentary rocks discovered in Western Greenland[9] and microbial mat fossils found in 3.48 billion-year-old sandstone discovered in Western Australia.[10][11] Nevertheless, several studies suggest that life on Earth may have XXXXXXXXX started even earlier,[12] as early as 4.25 billion years ago according to one study,[13] and even earlier yet, 4.4 billion years ago, according to another study.[14] The mechanism by which life began on Earth is unknown, although many hypotheses have been formulated. Since emerging, life has evolved into a variety of forms, which biologists have classified into a hierarchy of taxa. Life can survive and thrive in a wide range of conditions.

Though life is confirmed only on the Earth, many think that extraterrestrial life is not only plausible, but probable or inevitable.[15][16] Other planets and moons in the Solar System have been examined for evidence of having once supported simple life, and projects such as SETI have attempted to detect radio transmissions from possible alien civilizations. According to the panspermia hypothesis, XXXXXXXXXXmicroscopic life exists throughout the Universe, and is distributed by meteoroids, asteroids and planetoids.[17]

The meaning of life—its significance, origin, purpose, and ultimate fate—is a central concept and question in philosophy and religion. Both philosophy and religion have offered interpretations as to how life relates to existence and consciousness, and on related issues such as life stance, purpose, conception of a god or gods, a soul or an afterlife. Different XXXXXXXXXXXXXcultures throughout history have had widely varying approaches to these issues.

I have the following elements:

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

and a Textarea

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

When the user clicks on that input #P, the page should scroll to the previous XXXXXXXXX or whatever text they(the user) inserted in the textarea, with a nice animation.

When the user clicks on that input #N, the page should scroll to the next XXXXXXXXXor whatever text they(the user) inserted in the textarea, with a nice animation.

The animation should not be too much fast and should be fluid.

I am running the latest jQuery version and there is no database.

The text is randomly generated from different story books... so XXXXXXX might signify any word, string or text they want to search inside the randomly generated looong text from a story book.

PLEASE NOTE: The story books are save in .html files i.e story1.html, story2.html.... They are loaded inside divs using jQuery.load()

EDIT2: We tried to use i.e. jQuery("p:contains(txt)") but that scrolls to the parent p tag not the text or word itself

a paragraph like:

The Earth was formed about 4.54 billion years ago. The earliest life on Earth existed at least 3.5 billion years ago,[6][7][8] during the Eoarchean Era when sufficient crust had solidified following the molten Hadean Eon. The earliest physical evidence for life on Earth is biogenic graphite in 3.7 billion-year-old metasedimentary rocks discovered in Western Greenland[9] and microbial mat fossils found in 3.48 billion-year-old sandstone discovered in Western Australia.[10][11] Nevertheless, several studies suggest that life on Earth may have a paragraph like: The Earth was formed about 4.54 billion years ago. The earliest life on Earth existed at least 3.5 billion years ago,[6][7][8] during the Eoarchean Era when sufficient crust had solidified following the molten Hadean Eon. The earliest physical evidence for life on Earth is biogenic graphite in 3.7 billion-year-old metasedimentary rocks discovered in Western Greenland[9] and microbial mat fossils found in 3.48 billion-year-old sandstone discovered in Western Australia.[10][11] Nevertheless, several studies suggest that life on Earth may have a paragraph like: The Earth was formed about 4.54 billion years ago. The earliest life on Earth existed at least 3.5 billion years ago,[6][7][8] during the Eoarchean Era when sufficient crust had solidified following the molten Hadean Eon. The earliest physical evidence for life on Earth is biogenic graphite in 3.7 billion-year-old metasedimentary rocks discovered in Western Greenland[9] and microbial mat fossils found in 3.48 billion-year-old sandstone discovered in Western Australia.[10][11] Nevertheless, several studies suggest that life on Earth may have XXXXXXXXX

will scroll to the p but not the XXXXXXXXXXX

Any suggestion is highly praised.

Answer 1

You could potentially do it this way.

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

Keep in mind that this HTML won't actually scroll as its probably a lot shorter than your screen. Instead of scrolling, add a console log in the code below to see that it is pointing to right position from the top.

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

You can use :contains() to find specific text:

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

Then find the offset of target and scroll to it.

Caution, :contains finds all instances of the text in the page so which one you scroll to might be interesting.