How to combine localScroll with serialScroll plugins ?

Question

I have correctly implemented the serialScroll plugin, and the "slideshow" works well. However, in my webpage, there are some links in other tags that are linked to parts located in the different items of the slideshow.

I cannot manage to make those links to work. I think I should use the localScroll plugin from the same person, however I do not know how to make it work correctly.

Here is my HTML:

<article>
 <div>

 <section id="page-1">
 <p>Maecenas nisl lacus, pharetra id dapibus a, commodo et justo.<br/>
 Nam vel fermentum purus. Suspendisse vulputate pharetra nibh nec rutrum. Integer luctus condimentum turpis, tristique sodales tellus blandit sit amet. </p>
 </section>

 <section id="page-2">
 <p>Integer eleifend tellus sed nulla ullamcorper non sollicitudin turpis sagittis. Cras dui dolor, cursus non dignissim et, tristique quis est.</p> 
 <h3 id="title">A big title you can link to.</h3>  
 <p>Duis vel diam vitae libero adipiscing iaculis ac eget lorem. Nulla nec ante justo. Pellentesque augue magna, blandit id sollicitudin et, iaculis vel nibh.</p>
 </section>

 <section id="page-3">
 <p>In hac habitasse platea dictumst. Integer eleifend tellus sed nulla ullamcorper non sollicitudin turpis sagittis. Cras dui dolor, cursus non dignissim et, tristique quis est. </p>
 </section>

 <section id="page-4">
 <pCras dui dolor, cursus non dignissim et, tristique quis est.<br/>
 Duis vel diam vitae libero adipiscing iaculis ac eget lorem. Nulla nec ante justo. Integer luctus condimentum turpis, tristique sodales tellus blandit sit amet. </p>
 </section>

 <section id="page-5">
    <p>Maecenas nisl lacus, pharetra id dapibus a, commodo et justo. Quisque commodo cursus risus in convallis.</p>
 </section>

 </div>
</article>

<nav>
<a href="#" id="prev"></a>
<a href="#" id="next"></a>
<ul>
<li><a href="#">*</a></li>
<li><a href="#">*</a></li>
<li><a href="#">*</a></li> 
<li><a href="#">*</a></li> 
<li><a href="#">*</a></li>    
</ul></nav> 

<footer>

 <aside>
 <h3>Table of contents</h3>
 <ul>
 <li><a href="#page-1">First great title</a></li>
    <li><a href="#page-3">Second great title</a></li>    
 <li><a href="#title">Third great title</a></li>    
 </ul> 
 </aside>

 <details>details</details>

 <footer>dzqdqz</footer>

</footer>

Here are my scroll options for the serialScroll plugin :

 $('article').serialScroll({
  items:'section',
  prev:'#prev',
  next:'#next',
  navigation:'nav ul li',
  start:0,
  duration:400,
  margin:true,
  force:true,
  stop:true,
  lock:false,
  cycle:false,
  jump: true,
 });