WebStar101 WebStar101 - 10 days ago 7
Javascript Question

PanelSnap plugin and having a jump to section menu (going up jumps two sections)

I have the panelsnap (http://guidobouman.github.io/jquery-panelsnap/) plugin on my site. And then I have a side navigation that jumps to sections as well.

So the problem is, once you use the "jump to section" navigation for going upwards on the page, then it jumps to the section and immediately scroll up to the section above it.

Code i'm using is:

HTML

<nav>
<ul>
<li><a href="#section1">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
<li><a href="#section3">Section 3</a></li>
<li><a href="#section4">Section 4</a></li>
</ul>
</nav>

<section class="panelSection">
<a name="section1" id="section1"></a>
<p>Section 1</p>
</section>
<section class="panelSection">
<a name="section2" id="section2"></a>
<p>Section 2</p>
</section>
<section class="panelSection">
<a name="section3" id="section3"></a>
<p>Section 3</p>
</section>
<section class="panelSection">
<a name="section4" id="section4"></a>
<p>Section 4</p>
</section>


Panelsnap Call

$(function() {
var a = {
panelSelector: ".panelSection",
easing: "swing",
slideSpeed: "400",
directionThreshold: "25",
delay: 0
};
$("body").panelSnap(a)
});


Here is the JSFiddle link for working sample:

https://jsfiddle.net/z6g9q66L/

Thank you

Answer

Okay, so i got the solution.

You have to not use anchor tag jumps but rather use the panelsnap.js data-panel option. So you'll change your menu to this:

<nav class="nav">
  <ul>
    <li><a href="" data-panel="section1">Section 1</a></li>
    <li><a href="" data-panel="section2">Section 2</a></li>
    <li><a href="" data-panel="section3">Section 3</a></li>
    <li><a href="" data-panel="section4">Section 4</a></li>
  </ul>
</nav>

and then in your sections you'll add another data-panel, that would connect the menu to that section jump.

<section class="panelSection" data-panel="section1"></section>
<section class="panelSection" data-panel="section2"></section>
<section class="panelSection" data-panel="section3"></section>
<section class="panelSection" data-panel="section4"></section>

and then update the javascript call to:

$(function() {
  var a = {
    $menu: $(".nav"),
    menuSelector: "a",
    panelSelector: ".panelSection",
    easing: "swing",
    slideSpeed: "400",
    directionThreshold: "25",
    delay: 0
  };
  $("body").panelSnap(a)
});

For a working example check the jsfiddle link: https://jsfiddle.net/z6g9q66L/4/