PanelSnap 插件和跳转到部分菜单（向上跳转两个部分）

Question

我的网站上有 panelsnap (http://guidobouman.github.io/jquery-panelsnap/) 插件。然后我还有一个侧边导航，也可以跳转到各个部分。

所以问题是，一旦你使用 "jump to section" 导航在页面上向上移动，它就会跳转到该部分并立即向上滚动到它上面的部分。

我使用的代码是：

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 调用

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

这是工作示例的 JSFiddle link：

https://jsfiddle.net/z6g9q66L/

谢谢

Answer 1

好的，所以我得到了解决方案。

您不必使用锚标记跳转，而是使用 panelsnap.js 数据面板选项。因此，您需要将菜单更改为：

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

然后在您的部分中添加另一个数据面板，它将菜单连接到该部分跳转。

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

然后将 javascript 调用更新为：

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

有关工作示例，请检查 jsfiddle link：https://jsfiddle.net/z6g9q66L/4/

PanelSnap 插件和跳转到部分菜单（向上跳转两个部分）

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

javascript

jquery

jquery-plugins