2016-11-21 14 views
0

私のサイトにはパネルのプラグイン(http://guidobouman.github.io/jquery-panelsnap/)があります。そして、私はセクションにも同様にジャンプするサイドナビゲーションを持っています。PanelSnapプラグインとセクションメニューへのジャンプ(2つのセクションにジャンプ)

問題は、「セクションへジャンプ」ナビゲーションを使用してページを上に移動すると、そのセクションにジャンプし、すぐ上のセクションまでスクロールします。私が使用している

コードは次のとおりです。

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/

あなた

答えて

0

わかりました、ありがとうございましたので、私は解決策を得ました。

アンカータグのジャンプは使用しないで、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のコールを更新:https://jsfiddle.net/z6g9q66L/4/

:jsfiddleリンクをご確認作業たとえば

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

関連する問題