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

我在我的网站上有一个panelsnap（http://guidobouman.github.io/jquery-panelsnap/）插件。然后我有一个侧面导航跳转到部分。PanelSnap插件和跳转到部分菜单（向上跳两个部分）

所以问题是，一旦你使用“跳转到部分”导航向上在页面上，然后跳转到该部分，并立即向上滚动到上面的部分。

代码我使用的是：

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链接，工作样本：

https://jsfiddle.net/z6g9q66L/

谢谢

来源

2016-11-21 WebStar101

好了，所以我得到了解决。

您不得不使用锚标签跳转，而是使用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链接：https://jsfiddle.net/z6g9q66L/4/

来源

2016-11-28 11:46:14 WebStar101

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

回答

相关问题