スムーズにトップにスクロールする
jQueryを使用してスムーズにスクロールします。
以下ソース例です。
<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なのでなのも起こりません。
KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80～120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^
コメント