2016-03-21 1 views
0

こんにちは、私はjqueryを使用してコンテンツスライダーを実装しようとしています。私はテキストといくつかのセクションの多くを持っているdivがあります。スクロールしてテキストを表示することができます。これはこのようなものですscreenshot。ユーザがジャンプオプションの1つをクリックすると、ユーザはそのセクションに移動する必要があります(たとえば、ユーザが共同作業をクリックすると、共同作業に移動する必要があります)。また、ユーザがテキストを下にスクロールするとそれはオプションjqyeryを使用したコンテンツスライダー

にジャンプで強調表示されなければならない焦点であるセクションでは、どのように私はそれを

を実装することができますを教えてくださいしてこれを行うことができます任意のプラグインが存在する場合にそのことについて教えてください。おかげ

+0

ブートストラップにも同様の実装がありますhttp://getbootstrap.com/javascript/#affix – madalinivascu

答えて

0

ここで良い解決策は、jquery.scrollToかもしれない - jQueryの

と 軽量、クロスブラウザとカスタマイズ性の高いアニメーションスクロール

index.htmlを

<!-- Include jQuery from somewhere, must use version 1.8 or above --> 
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
<!-- Include latest jquery.scrollTo, currently 2.1.0, can download from https://github.com/flesler/jquery.scrollTo/releases --> 
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.scrollto/2.1.0/jquery.scrollTo.min.js"></script> 
<!-- Initialize the plugin, the contents of the script can be inlined here, of course --> 
<script type="text/javascript" src="js/init.js"></script> 

init.js

// You can avoid the document.ready if you put the script at the bottom of the page 
$(document).ready(function() { 
    // Bind to the click of all links with a #hash in the href 
    $('a[href^="#"]').click(function(e) { 
    // Prevent the jump and the #hash from appearing on the address bar 
    e.preventDefault(); 
    // Scroll the window, stop any previous animation, stop on user manual scroll 
    // Check https://github.com/flesler/jquery.scrollTo for more customizability 
    $(window).stop(true).scrollTo(this.hash, {duration:1000, interrupt:true}); 
    }); 
}); 

あなたは要点を見つけることができますhere

+0

これは、リンク先をクリックしないでスクロールすると、フォーカスが当てられているオプションをハイライト表示します – garden

+0

これはhttp: /davist11.github.io/jQuery-One-Page-Nav/ –

関連する問題