How should I implement jScroll in a basic HTML page?

Question

I'm trying to replicate this useless website: http://endless.horse , but the jScript documentation does not do a great job of explaining how to implement it.

Basically, I need a block of text "Body" to be at the top, then for a block of text "Legs" to appear infinitely (as placeholders) (see website).

I've tried adding what the website says: http://jscroll.com , but it only says "[element].jscroll()" and that's it. I've also tried copying the code from the website, but that also doesn't work.

Here is the code I'm using: DIV that should scroll:

<div class="jscroll">
    <pre>
        <h1>Body</h1>
    </pre>
    <a href="rest.html"></a>
</div>

rest.html:

<pre>
    Legs
</pre>
<a href="rest.html"></a>

Code was taken from the website

javascript/jquery/jscroll:

$(function() {
    $('.jscroll').jscroll({
        autoTrigger: true,
        padding: 2000px,
        nextSelector: "rest.html"
    });    
});

I thought I would get a scrolling webpage with "Body" and "Legs", but I got just "Body" instead.

Answer 1

Assuming that you have included the right js and you run your script when the document is ready, the following code works for you:

<script type="text/javascript" src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="https://unpkg.com/jscroll@2.4.1/dist/jquery.jscroll.min.js"></script>

<div class="jscroll">
    <pre>
        <h1>Body</h1>
    </pre>
    <a href="rest.html"></a>
</div>
<script>
document.addEventListener("DOMContentLoaded", function(event) { 
  $(function() {
      $('.jscroll').jscroll({
          autoTrigger: true,
          padding: 2000,
          nextSelector: "a:last"
      });   
  }); 
});

</script>

Basically, you need to change your nextSelector to be more specific and you must put a real jquery selector. 'a:last' always selects the last a tag that is available. Also, you need to change 2000px to 2000 . this code worked for me. Don't forget to include more characters to your rest.html output.