jQueryを使用してスムーズにスクロールします。
以下ソース例です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<script type="text/javascript"> $(function(){ $('a[href=#top]').click(function(){ var href = $(this).attr("href"); var target = $(href == "#top" ? 'html' : href); var position = target.offset().top; $("html, body").animate({scrollTop:position}, 800, "swing"); return false; }); }); </script> <a href="#top">Top</a> <a href="#topp">Top</a> |
aタグのリンクが#topのアンカーをクリックした場合スクリプトが実行されます。
targetにはhrefが#topならhtml、それ以外ならhrefが代入されます。
positionはページの先頭です。
あとはanimateでページトップにスイングしています。800としていますが、小さくすると早くスムーズされます。
リンクを二つ設置していますが、#topの場合スクロールされますが、#toppの場合はhref属性になるため単なるアンカーの動きをします。この場合#toppなのでなのも起こりません。
関西で140-170/80～120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
Python3.6,Djangoを勉強中です,Javaは少し飽きてしまってます–;
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^
