次のサイトの下の方にあるカービィをクリックするとカービィが上昇すると同時にスムーススクロールが完了
するようになっているのですが、僕も似たような仕掛けを作ろうと思いつつコードを書いてみましたが、
スクロールは完了するものの画像は飛んでくれませんでした。
もう僕には手に負えないので皆さん助けてください。リンク内容
HTML
1 <div class="circle" id="pageTop"> 2 <img src="images/bird.png" alt="黒鳥" class="circle-img" id="ptopBtn">
CSS
1.circle { 2 margin: 0 auto; 3 margin-top: 10px; 4 width: 47px; 5 height: 47px; 6 background-color: #d5d733; 7 border-radius: 50%; 8 cursor: pointer; 9 position: relative; 10} 11 12.circle-img { 13 margin-left: 11px; 14 margin-top: 2px; 15 z-index: 2; 16}
javascript
1var $pageLink = $('#pageTop'), 2 3 $pageButton = $('#ptopBtn'), 4 $pageLink.click(function (){ 5 6 $('html,body').animate({scrollTop: 0}, 2500 , "swing"); 7 8 $pageButton.animate({top: -pageTop-200}, 2500,"swing",function(){ 9 10 });
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/03/28 12:01
2019/03/29 01:10
2019/03/29 03:50
2019/03/30 01:12
2019/03/30 06:18
2019/03/30 11:44