PanelSnap 插件和跳转到部分菜单(向上跳转两个部分)
PanelSnap plugin and having a jump to section menu (going up jumps two sections)
我的网站上有 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/
谢谢
好的,所以我得到了解决方案。
您不必使用锚标记跳转,而是使用 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 (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/
谢谢
好的,所以我得到了解决方案。
您不必使用锚标记跳转,而是使用 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/