ページ内リンクのプラグインを作成しました。
簡単なページ内リンクのプラグインを作成しました。
HTML
<body> <div id="container"> <header> <h1>The Link In A Page</h1> </header> <nav> <ul> <li class="ex01 link_button" data-from="ex01"> <p><a href="#ex01">ex01</a></p> </li> <li class="ex02 link_button" data-from="ex02"> <p><a href="#ex02">ex02</a></p> </li> <li class="ex03 link_button" data-from="ex03"> <p><a href="#ex03">ex03</a></p> </li> <li class="ex04 link_button" data-from="ex04"> <p><a href="#ex04">ex04</a></p> </li> <li class="ex05 link_button" data-from="ex05"> <p><a href="#ex05">ex05</a></p> </li> </ul> </nav> <div id="content"> <section id="ex01" data-to="ex01"> <h2><span>ex01</span></h2> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </section> <section id="ex02" data-to="ex02"> <h2><span>ex02</span></h2> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </section> <section id="ex03" data-to="ex03"> <h2><span>ex03</span></h2> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </section> <section id="ex04" data-to="ex04"> <h2><span>ex04</span></h2> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </section> <section id="ex05" data-to="ex05"> <h2><span>ex05</span></h2> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </section> </div> </div> </body>
$(function(){ //nav fixed var pos = $('nav').offset().top; var elemHeight = $('nav').outerHeight(true); $(window).scroll(function(){ var nowTop = $(this).scrollTop(); fixed($('nav'),nowTop); changeColor($('nav a'),'#e77b4a',nowTop); }); //ページ内リンク $('.link_button a').linkInPage({ 'offset': 60, 'easing': 'easeOutCubic' }); //navのカラーをscrollTopによって変える //対応のコンテントの領域内で色を変える function changeColor(elem,color,nowTop){ elem.each(function(){ var to = $(this).attr('href'); var toPos = $(to).offset().top - 60; var contentHeight = $(to).innerHeight(); //対応のコンテントのtop位置かつそのコンテント領域内なら if(nowTop >= toPos && nowTop < toPos + contentHeight){ $(this).css('color',color); }else{ $(this).css('color','black'); } }) } //navをfixed function fixed(elem,nowTop){ if(nowTop >= pos - 30){ elem.css({ 'background': 'rgba(250,250,250,0.8)', 'position': 'fixed', 'top': 0 + 10 }); //navの高さが無くなった分、その高さ分のマージンを作る $('#content').css('padding-top',elemHeight); }else if(elem.css('position') === 'fixed'){ if(nowTop < pos -30){ elem.css({ 'background': 'rgba(255,255,255,0.8)', 'position': 'relative', 'top': 0 }); $('#content').css('padding-top',0); } } } }); //プラグイン ;(function($){ $.fn.linkInPage = function(options){ var opts = $.extend({},$.fn.linkInPage.defaults,options); var duration = opts.duration; var easing = opts.easing; var offset = opts.offset; $(this).click(function(){ var to = $(this).attr('href'); var toPos = $(to).offset().top - offset; $('html,body').animate({'scrollTop': toPos},duration,easing); //リンク無効 return false; }); }; $.fn.linkInPage.defaults = { 'duration' : 300, 'easing': 'swing', //margin-top 'offset': 20 }; })(jQuery);
実行部分
プラグイン部分を読み込んで入れば実行可能です
//ページ内リンク $('.link_button a').linkInPage({ //margin-top 'offset': 60, //easing、今回はjquery.easing.jsを読みこんでいるのでeaseOutCubicを選択 'easing': 'easeOutCubic' durationも任意の数値を指定できる });
