スムーズにトップにスクロールする

2015/5/3 jQuery

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>

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なのでなのも起こりません。

KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80～120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^

コメントをどうぞコメントをキャンセル