【jQuery】アニメーションっぽい感じのアンカーリンク

アニメーションっぽい感じの動きのアンカーリンク

 

いとも簡単に実装できるみたい

 

 

下記スクリプトをかきこむだけ

 

うわっ

 

 

超簡単

 

 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    $('a[href^=#]').click(function(){
        var speed = 500;
        var href= $(this).attr("href");
        var target = $(href == "#" || href == "" ? 'html' : href);
        var position = target.offset().top;
        $("html, body").animate({scrollTop:position}, speed, "swing");
        return false;
    });
});
</script>

関連するかもしれない記事

要素が表示されたときに処理を行ひたひ

ここを参考にさせていただきました。ありがとうございます。 http://on-ze.com/archives/2679

2016.08.29

【jQuery】コンテンツをオーバーレイ表示させちゃう

デモ   OPEN CLOSE でた!   HTML部分 <div id="btn">OPEN</div> <div id=&qu…

2015.09.16

ボタンクリック→開く

実装したいなら以下   more 中身だよ         <script> $(document).ready(function(){ …

2015.08.19

スクロール量でヘッダーなどの要素を固定するやつ

がんばれ     Html <div id="oya"> <div id="ko"> <nav> &lt…

2015.05.12

スクロールしてたら下からいきなりニュルっとでてくるあれ

これやで〜       CSS   footer { background: #000; color: #fff; padding: 20px 0; posit…

2015.05.01

Page Top


Warning: Use of undefined constant XML - assumed 'XML' (this will throw an Error in a future version of PHP) in /home/44uta/www/44uta/wpbox/wp-content/plugins/wp-syntaxhighlighter/wp-syntaxhighlighter.php on line 1048